/* css/pages/static-pages.css */

/* ---------- Grundstruktur ---------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  padding: 0;
}

/* ---------- Main-Layout ---------- */
main {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0.3rem;
  text-align: center;
}

/* ---------- Überschriften ---------- */
h1 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: var(--color-primary);
}

h2 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 1.5rem 0 0.5rem;
  text-align: left;
}

h3 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-muted);
  text-align: left;
}

/* ---------- Texte & Listen ---------- */
p,
li {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: var(--color-muted);
  text-align: left;
}

ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

ul li {
  margin-bottom: 0.4rem;
}

.compact-center-text {
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
}

/* ---------- Links ---------- */
a {
  color: var(--color-primary);
}

a:hover {
  text-decoration: none;
}

/* ---------- Sections ---------- */
section {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
}

/* ---------- Sticky Header ---------- */
.sticky-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(30, 18, 64, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 1.2rem 0.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.sticky-header h1 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-title);
 padding-top: 0.6rem;
}

.sticky-header .subtitle {
  font-size: 0.9rem;
  margin-top: 0.2rem;
  color: var(--color-muted);
	text-align: center;
}

/* ---------- Login & Notify Box ---------- */
.login-box,
.notify-box {
  background-color: var(--color-box);
  padding: 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1.0rem;
}

.login-box input,
.notify-box input {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem;
  border-radius: var(--border-radius);
  background-color: #3a2b60;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* ---------- Login-Links ---------- */
.login-links {
  font-size: 0.85rem;
  margin-top: 0.5rem;
text-align: center;
}

.login-links a {
  color: var(--color-primary);
  margin: 0 0.5rem;
}

/* ---------- User Counter ---------- */
.user-counter {
  background-color: var(--color-box);
  padding: 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1.0rem;
  font-weight: bold;
  color: var(--color-muted);
  width: 100%;
  box-sizing: border-box;
}


/* ---------- Checkbox-Gruppen ---------- */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 24px;
  font-size: 0.95rem;
  color: white;
  cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #8f5aff;
}

.checkbox-wrapper a {
  text-decoration: underline;
  color: #ffffff;
}

.checkbox-wrapper a:hover {
  color: #c9a7ff;
  text-decoration: none;
}

.plain-label {
  cursor: default;
}

/* ---------- Footer ---------- */
footer {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.3rem;
  color: var(--color-muted);
  padding: 0 0.75rem env(safe-area-inset-bottom, 1.25rem);
  word-spacing: 0.1em;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.75rem;
}
footer {
  padding-bottom: max(5rem, env(safe-area-inset-bottom, 1.5rem));
}

																			
/* Badges & Regeln – unverändert */
.badge {
  display:inline-block; padding:0.2rem 0.5rem; border-radius:0.4rem;
  font-size:0.85rem; line-height:1; margin-right:0.35rem;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
}
.severity--light { color:#ffd47a; border-color:rgba(255,212,122,0.3); }
.severity--severe { color:#ff7a7a; border-color:rgba(255,122,122,0.35); }

.rules { counter-reset: rule; list-style:none; padding-left:0; margin:0; }
.rule {
  margin:1.2rem 0; padding:1rem;
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius,0.6rem);
  background: rgba(255,255,255,0.02);
}
.rule h3 { margin:0 0 0.3rem 0; }
.rule .explanation { margin:0.2rem 0 0.4rem; color: var(--color-muted,#ccc); }
.rule .examples { display:grid; gap:0.35rem; margin-top:0.4rem; }
.rule .examples .ok { border-left:3px solid #6bd36b; padding-left:0.6rem; }
.rule .examples .violation { border-left:3px solid #ff7a7a; padding-left:0.6rem; }

.sanction-legend { list-style: disc; padding-left:1.2rem; margin:0; }

/* 🔧 NEU: Full-bleed Utility nur für Elemente innerhalb einer Section */
.full-bleed {
  --bleed: var(--padding, 1rem);
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  width: calc(100% + (2 * var(--bleed)));
}

/* 🔧 NEU: Section-Box konsistent halten */
.page-community section {
  overflow: hidden; /* hält Rundungen sauber, falls Kinder bleeden */
}

.scroll-footer-link {
  text-align: center;
  margin: 1rem 0;
}
.scroll-footer-link a {
  font-size: 0.75rem;
  color: var(--color-muted);
  opacity: 0.6;
  text-decoration: none;
}
.scroll-footer-link a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Container bleibt gleich */
.has-jump { position: relative; }

/* Ultra-dezenter Top-Right-Button */
.jump-footer{
  position: absolute;
  top: 6px;
  right: 8px;

  /* sehr klein */
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* “Ghost”-Style: kein Rahmen, kein Kasten */
  background: transparent;
  border: 0;
  color: var(--color-muted);
  text-decoration: none;

  /* standardmäßig fast unsichtbar & nicht klickbar */
  opacity: .18;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2;
}

/* Einblenden, wenn Section im Hover/Focus ist */
.has-jump:hover .jump-footer,
.has-jump:focus-within .jump-footer {
  opacity: .55;
  pointer-events: auto;
}

/* Direkter Hover auf dem Button: kurz etwas kräftiger + mini Scale */
.jump-footer:hover,
.jump-footer:focus-visible {
  opacity: .9;
  transform: scale(1.05);
  outline: none;
}

@media (pointer: coarse){
  .jump-footer{
    opacity: .35;                  /* leicht sichtbarer */
    pointer-events: auto;          /* wichtig */
    width: 28px; height: 28px;     /* besserer Tap-Target */
  }
  /* unsichtbar vergrößerte Klickfläche */
  .jump-footer::after{
    content: "";
    position: absolute;
    inset: -6px;                   /* unsichtbarer Puffer */
  }
}