/* ==========================================================================
   Feedback-Pinnwand (egg-tracker.com)
   Inspiriert von der lebensechten Pinnwand aus tyams-filing-cabinet:
   - Kork-Hintergrund aus puren CSS-Gradienten (keine Bilddateien)
   - Notizkarten mit Pergament-Look, liniertem Grund und Messingnadeln
   - Subtile organische Kartendrehung auf Desktop
   - Upvoting (+1) mit Mikro-Animation
   ========================================================================== */

/* Handschrift fuer Notizzettel: dieselbe Caveat wie auf den Landing- & Umfrageseiten */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-600-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Farbvariablen fuer die Zettel & Pinnwand ----------------------------- */
:root {
  /* Dark Studio Board (Rauchkork fuer deutlichen Kontrast zum Notizpapier) */
  --kork-grund: #2a2040;
  --kork-2: #34284e;
  --kork-hell: rgba(255, 255, 255, 0.16);
  --kork-dunkel: rgba(14, 9, 24, 0.50);
  --kork-rahmen: rgba(196, 162, 255, 0.28);
  --kork-schatten: inset 0 4px 28px rgba(10, 6, 18, 0.70), 0 16px 40px rgba(0, 0, 0, 0.6);

  /* Samtige Nacht-Pergamentkarten im Dark-Mode (klar abgesetzt) */
  --zettel-papier: #1a1329;
  --zettel-papier-fuss: #140e22;
  --zettel-rand: rgba(196, 162, 255, 0.22);
  --zettel-schatten: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --zettel-schatten-hover: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 18px rgba(196, 162, 255, 0.25);
  --zettel-zeilen: rgba(196, 162, 255, 0.05);
  --zettel-tinte: #f3eeff;
  --zettel-tinte-leise: #bca9dc;
  --zettel-tinte-blass: #8c7aa8;

  /* Einheitliche Retro-Stempelfarben */
  --stempel-retro-color: #f08b72;
  --stempel-retro-bg: rgba(240, 139, 114, 0.12);
  --stempel-retro-border: rgba(240, 139, 114, 0.45);

  --stempel-erfolg-color: #74d3a6;
  --stempel-erfolg-bg: rgba(116, 211, 166, 0.12);
  --stempel-erfolg-border: rgba(116, 211, 166, 0.45);

  --zettel-admin-bg: rgba(255, 255, 255, 0.05);
  --zettel-admin-border: var(--accent);

  --vote-btn-bg: rgba(196, 162, 255, 0.10);
  --vote-btn-border: rgba(196, 162, 255, 0.22);
  --vote-btn-color: #f3eeff;
  --vote-btn-hover-bg: rgba(196, 162, 255, 0.22);
  --zettel-fuss-border: rgba(196, 162, 255, 0.12);
}

/* Helle Palette: EggSposure (Pergament & Naturkork)
   Zweimal notiert wie in site.css fuer Systemwahl und Umschalter. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --kork-grund: #caa778;
    --kork-2: #dcbb8f;
    --kork-hell: rgba(255, 255, 255, 0.35);
    --kork-dunkel: rgba(96, 64, 28, 0.18);
    --kork-rahmen: rgba(92, 70, 40, 0.35);
    --kork-schatten: inset 0 2px 20px rgba(96, 64, 28, 0.25), 0 8px 24px rgba(74, 56, 30, 0.14);

    --zettel-papier: #fffcf4;
    --zettel-papier-fuss: #f5eedf;
    --zettel-rand: rgba(92, 70, 40, 0.18);
    --zettel-schatten: 0 2px 4px rgba(45, 30, 15, 0.10), 0 8px 20px rgba(45, 30, 15, 0.14);
    --zettel-schatten-hover: 0 4px 8px rgba(45, 30, 15, 0.15), 0 16px 32px rgba(45, 30, 15, 0.22);
    --zettel-zeilen: rgba(120, 95, 60, 0.12);
    --zettel-tinte: #2a2017;
    --zettel-tinte-leise: #5f5749;
    --zettel-tinte-blass: #8c7e6b;

    --stempel-retro-color: #a84b38;
    --stempel-retro-bg: rgba(168, 75, 56, 0.08);
    --stempel-retro-border: rgba(168, 75, 56, 0.45);

    --stempel-erfolg-color: #247545;
    --stempel-erfolg-bg: rgba(36, 117, 69, 0.09);
    --stempel-erfolg-border: rgba(36, 117, 69, 0.45);

    --zettel-admin-bg: rgba(138, 90, 24, 0.08);
    --zettel-admin-border: #b8861d;

    --vote-btn-bg: rgba(138, 90, 24, 0.08);
    --vote-btn-border: rgba(138, 90, 24, 0.24);
    --vote-btn-color: #3a2a12;
    --vote-btn-hover-bg: rgba(138, 90, 24, 0.16);
    --zettel-fuss-border: rgba(140, 110, 60, 0.16);
  }
}

[data-theme="light"] {
  --kork-grund: #caa778;
  --kork-2: #dcbb8f;
  --kork-hell: rgba(255, 255, 255, 0.35);
  --kork-dunkel: rgba(96, 64, 28, 0.18);
  --kork-rahmen: rgba(92, 70, 40, 0.35);
  --kork-schatten: inset 0 2px 20px rgba(96, 64, 28, 0.25), 0 8px 24px rgba(74, 56, 30, 0.14);

  --zettel-papier: #fffcf4;
  --zettel-papier-fuss: #f5eedf;
  --zettel-rand: rgba(92, 70, 40, 0.18);
  --zettel-schatten: 0 2px 4px rgba(45, 30, 15, 0.10), 0 8px 20px rgba(45, 30, 15, 0.14);
  --zettel-schatten-hover: 0 4px 8px rgba(45, 30, 15, 0.15), 0 16px 32px rgba(45, 30, 15, 0.22);
  --zettel-zeilen: rgba(120, 95, 60, 0.12);
  --zettel-tinte: #2a2017;
  --zettel-tinte-leise: #5f5749;
  --zettel-tinte-blass: #8c7e6b;

  --stempel-retro-color: #a84b38;
  --stempel-retro-bg: rgba(168, 75, 56, 0.08);
  --stempel-retro-border: rgba(168, 75, 56, 0.45);

  --stempel-erfolg-color: #247545;
  --stempel-erfolg-bg: rgba(36, 117, 69, 0.09);
  --stempel-erfolg-border: rgba(36, 117, 69, 0.45);

  --zettel-admin-bg: rgba(138, 90, 24, 0.08);
  --zettel-admin-border: #b8861d;

  --vote-btn-bg: rgba(138, 90, 24, 0.08);
  --vote-btn-border: rgba(138, 90, 24, 0.24);
  --vote-btn-color: #3a2a12;
  --vote-btn-hover-bg: rgba(138, 90, 24, 0.16);
  --zettel-fuss-border: rgba(140, 110, 60, 0.16);
}

/* --- Seitenkopf ---------------------------------------------------------- */
.feedback-kopf {
  text-align: center;
  max-width: 44rem;
  margin: 1.5rem auto 2rem;
  padding: 0 1rem;
}

.feedback-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.feedback-kopf h1 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.8rem;
  color: var(--text-strong);
}

.feedback-akzent {
  color: var(--accent);
}

.feedback-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* --- Beta-Banner & Tape -------------------------------------------------- */
.feedback-beta-banner {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 38rem;
  margin: 1.2rem auto 0;
  padding: 0.75rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-strong);
  text-align: left;
}

.feedback-beta-banner .beta-tag {
  display: inline-block;
  margin-top: 0.1rem;
  padding: 0.2rem 0.6rem;
  background: var(--accent);
  color: #160829;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.feedback-beta-banner .beta-text {
  flex: 1;
}

.feedback-beta-banner .beta-text strong {
  color: var(--accent);
}

@media (min-width: 581px) {
  .feedback-beta-banner {
    border-radius: 999px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
  }
  .feedback-beta-banner .beta-tag {
    margin-top: 0;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .feedback-beta-banner {
    border-color: rgba(146, 103, 40, 0.45);
    background: rgba(253, 250, 244, 0.95);
    box-shadow: 0 4px 14px rgba(70, 52, 25, 0.10);
  }
  :root:not([data-theme="dark"]) .feedback-beta-banner .beta-tag {
    background: linear-gradient(180deg, var(--cta-grad-top), var(--cta-grad-bottom));
    color: var(--cta-fg);
    border: 1px solid var(--cta-border);
    box-shadow: 0 2px 6px rgba(146, 103, 40, 0.25);
  }
  :root:not([data-theme="dark"]) .feedback-beta-banner .beta-text strong {
    color: var(--accent);
  }
}

:root[data-theme="light"] .feedback-beta-banner {
  border-color: rgba(146, 103, 40, 0.45);
  background: rgba(253, 250, 244, 0.95);
  box-shadow: 0 4px 14px rgba(70, 52, 25, 0.10);
}

:root[data-theme="light"] .feedback-beta-banner .beta-tag {
  background: linear-gradient(180deg, var(--cta-grad-top), var(--cta-grad-bottom));
  color: var(--cta-fg);
  border: 1px solid var(--cta-border);
  box-shadow: 0 2px 6px rgba(146, 103, 40, 0.25);
}

:root[data-theme="light"] .feedback-beta-banner .beta-text strong {
  color: var(--accent);
}

/* --- Hinweismeldung (Danke / Fehler) -------------------------------------- */
.feedback-meldung {
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.feedback-meldung-erfolg {
  background: rgba(116, 211, 166, 0.16);
  border: 1px solid rgba(116, 211, 166, 0.4);
  color: #74d3a6;
}
.feedback-meldung-erfolg strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #9fe3b0;
}

.feedback-meldung-fehler {
  background: rgba(255, 107, 87, 0.14);
  border: 1px solid rgba(255, 107, 87, 0.4);
  color: #ff9f91;
}

/* --- Leiste ueber der Pinnwand (Aktionen & Filter) ------------------------ */
.pinnwand-leiste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 0 0.25rem;
}

@media (min-width: 601px) {
  .pinnwand-leiste {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.btn-anpinnen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cta-grad-top), var(--cta-grad-bottom));
  color: var(--cta-fg);
  border: 1px solid var(--cta-border, transparent);
  box-shadow: var(--cta-shadow);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

@media (min-width: 601px) {
  .btn-anpinnen {
    justify-content: flex-start;
  }
}

.btn-anpinnen:hover {
  transform: translateY(-2px);
  box-shadow: var(--cta-shadow-hover);
  filter: brightness(1.06);
}

.btn-anpinnen:active {
  transform: translateY(0);
}

.btn-anpinnen svg {
  width: 19px;
  height: 19px;
}

.pinnwand-filter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 601px) {
  .pinnwand-filter {
    justify-content: flex-start;
  }
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  color: var(--text-strong);
  border-color: var(--accent);
}

.filter-btn.aktiv {
  background: var(--accent-15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Kategoriefarben fuer Filter-Buttons (korrespondieren mit den Zettel-Kategorien) */
.filter-btn[data-filter="sprache"] { border-color: rgba(216, 150, 255, 0.35); color: #d896ff; }
.filter-btn[data-filter="sprache"]:hover,
.filter-btn[data-filter="sprache"].aktiv {
  background: rgba(216, 150, 255, 0.20);
  border-color: #d896ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(216, 150, 255, 0.30);
}

.filter-btn[data-filter="funktion"] { border-color: rgba(233, 184, 90, 0.35); color: #e9b85a; }
.filter-btn[data-filter="funktion"]:hover,
.filter-btn[data-filter="funktion"].aktiv {
  background: rgba(233, 184, 90, 0.20);
  border-color: #e9b85a;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(233, 184, 90, 0.30);
}

.filter-btn[data-filter="design"] { border-color: rgba(116, 211, 166, 0.35); color: #74d3a6; }
.filter-btn[data-filter="design"]:hover,
.filter-btn[data-filter="design"].aktiv {
  background: rgba(116, 211, 166, 0.20);
  border-color: #74d3a6;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(116, 211, 166, 0.30);
}

.filter-btn[data-filter="sonstiges"] { border-color: rgba(157, 178, 255, 0.35); color: #9db2ff; }
.filter-btn[data-filter="sonstiges"]:hover,
.filter-btn[data-filter="sonstiges"].aktiv {
  background: rgba(157, 178, 255, 0.20);
  border-color: #9db2ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(157, 178, 255, 0.30);
}

/* Helle Palette: Filter-Buttons in dezenter Tinte */
[data-theme="light"] .filter-btn[data-filter="alle"].aktiv {
  background: linear-gradient(180deg, rgba(242, 215, 149, 0.55), rgba(207, 154, 68, 0.40));
  border-color: rgba(146, 103, 40, 0.65);
  color: #3a2a12;
  box-shadow: 0 2px 6px rgba(146, 103, 40, 0.15);
}

[data-theme="light"] .filter-btn[data-filter="sprache"] { border-color: rgba(142, 53, 160, 0.35); color: #8e35a0; }
[data-theme="light"] .filter-btn[data-filter="sprache"]:hover,
[data-theme="light"] .filter-btn[data-filter="sprache"].aktiv {
  background: rgba(142, 53, 160, 0.14);
  border-color: #8e35a0;
  color: #551263;
  box-shadow: 0 2px 6px rgba(142, 53, 160, 0.15);
}

[data-theme="light"] .filter-btn[data-filter="funktion"] { border-color: rgba(156, 108, 16, 0.35); color: #9c6c10; }
[data-theme="light"] .filter-btn[data-filter="funktion"]:hover,
[data-theme="light"] .filter-btn[data-filter="funktion"].aktiv {
  background: rgba(156, 108, 16, 0.14);
  border-color: #9c6c10;
  color: #593902;
  box-shadow: 0 2px 6px rgba(156, 108, 16, 0.15);
}

[data-theme="light"] .filter-btn[data-filter="design"] { border-color: rgba(30, 117, 90, 0.35); color: #1e755a; }
[data-theme="light"] .filter-btn[data-filter="design"]:hover,
[data-theme="light"] .filter-btn[data-filter="design"].aktiv {
  background: rgba(30, 117, 90, 0.14);
  border-color: #1e755a;
  color: #0c4333;
  box-shadow: 0 2px 6px rgba(30, 117, 90, 0.15);
}

[data-theme="light"] .filter-btn[data-filter="sonstiges"] { border-color: rgba(44, 84, 138, 0.35); color: #2c548a; }
[data-theme="light"] .filter-btn[data-filter="sonstiges"]:hover,
[data-theme="light"] .filter-btn[data-filter="sonstiges"].aktiv {
  background: rgba(44, 84, 138, 0.14);
  border-color: #2c548a;
  color: #143560;
  box-shadow: 0 2px 6px rgba(44, 84, 138, 0.15);
}

/* --- Das Korkbrett ------------------------------------------------------- */
.pinnwand {
  position: relative;
  border-radius: 18px;
  border: 4px solid var(--kork-rahmen);
  box-shadow: var(--kork-schatten);
  background-color: var(--kork-grund);
  background-image:
    radial-gradient(circle at 30% 40%, var(--kork-hell) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 65%, var(--kork-dunkel) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 18% 82%, var(--kork-dunkel) 0 1px, transparent 1.6px),
    linear-gradient(155deg, var(--kork-2), var(--kork-grund) 65%);
  background-size: 23px 23px, 31px 29px, 17px 19px, 100% 100%;
  padding: 1.5rem 1rem 2rem;
  min-height: 28rem;
}

@media (min-width: 601px) {
  .pinnwand {
    padding: 2.2rem 1.6rem 2.8rem;
  }
}

/* Gitter der Notizen auf dem Brett */
.zettel-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.8rem;
  align-items: start;
}

/* --- Eine Notizkarte (Zettel) ------------------------------------------- */
.zettel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--zettel-papier), var(--zettel-papier-fuss));
  color: var(--zettel-tinte);
  border-radius: 12px;
  box-shadow: var(--zettel-schatten);
  padding: 1.35rem 1.2rem 1rem;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease;
  min-height: 12rem;
  border: 1px solid var(--zettel-rand);
}

/* Organische minimale Zufallsdrehungen auf Desktop */
@media (min-width: 680px) {
  .zettel:nth-child(4n+1) { transform: rotate(-0.7deg); }
  .zettel:nth-child(4n+2) { transform: rotate(0.9deg); }
  .zettel:nth-child(4n+3) { transform: rotate(-0.5deg); }
  .zettel:nth-child(4n+4) { transform: rotate(0.6deg); }
}

.zettel:hover,
.zettel:focus-within {
  transform: translateY(-4px) scale(1.015) rotate(0deg);
  box-shadow: var(--zettel-schatten-hover);
  z-index: 10;
}

/* Reisszwecke in der Primaerfarbe der aktiven Palette */
.pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--cta-border);
  box-shadow: var(--shadow-badge);
  z-index: 2;
}

/* Zettel-Kopf */
.zettel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Harmonisierte Kategorie-Pillen (fein, dezent, nie knallig) */
.zettel-kat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--zettel-admin-bg);
  border: 1px solid var(--zettel-rand);
  color: var(--zettel-tinte-leise);
}

.pille-sprache { color: #d896ff; }
.pille-funktion { color: #e9b85a; }
.pille-design { color: #74d3a6; }
.pille-sonstiges { color: #9db2ff; }

[data-theme="light"] .pille-sprache { color: #8e35a0; }
[data-theme="light"] .pille-funktion { color: #9c6c10; }
[data-theme="light"] .pille-design { color: #1e755a; }
[data-theme="light"] .pille-sonstiges { color: #2c548a; }

/* Status-Stempel (Retro-Aktenstempel mit typografischer Authentizitaet) */
.zettel-stempel {
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1.5px dashed var(--stempel-retro-border);
  color: var(--stempel-retro-color);
  background: var(--stempel-retro-bg);
  transform: rotate(-2.5deg);
  display: inline-block;
}

.stempel-neu,
.stempel-pruefung,
.stempel-geplant,
.stempel-in_arbeit,
.stempel-in-arbeit {
  border-color: var(--stempel-retro-border);
  color: var(--stempel-retro-color);
  background: var(--stempel-retro-bg);
}

.stempel-umgesetzt {
  border-color: var(--stempel-erfolg-border);
  color: var(--stempel-erfolg-color);
  background: var(--stempel-erfolg-bg);
}

.stempel-abgelehnt {
  border-color: var(--stempel-retro-border);
  color: var(--stempel-retro-color);
  background: var(--stempel-retro-bg);
  opacity: 0.75;
}

/* Zettel-Body & Text mit linierten Schreibzeilen */
.zettel-body {
  flex: 1;
  margin-bottom: 0.9rem;
}

.zettel-text {
  margin: 0;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.55rem;
  color: var(--zettel-tinte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background-image: repeating-linear-gradient(180deg, transparent 0 1.48rem, var(--zettel-zeilen) 1.48rem 1.55rem);
}

/* Antwort-Kasten von Andreas */
.zettel-admin-notiz {
  margin-top: 0.85rem;
  padding: 0.55rem 0.85rem;
  background: var(--zettel-admin-bg);
  border-left: 3px solid var(--zettel-admin-border);
  border-radius: 0 8px 8px 0;
}

.zettel-admin-notiz strong {
  display: block;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zettel-tinte-leise);
  margin-bottom: 0.15rem;
}

.zettel-admin-notiz-text {
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent);
  display: block;
}

/* Zettel-Fusszeile (Autor, Datum, Upvoting) */
.zettel-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--zettel-fuss-border);
  padding-top: 0.65rem;
  margin-top: auto;
}

.zettel-autor {
  font-size: 0.78rem;
  color: var(--zettel-tinte-blass);
}

/* Upvoting-Button (+1) */
.vote-form {
  margin: 0;
}

.btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--vote-btn-bg);
  border: 1px solid var(--vote-btn-border);
  color: var(--vote-btn-color);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-vote:hover {
  background: var(--vote-btn-hover-bg);
  transform: scale(1.05);
}

.btn-vote.gestimmt {
  background: #279653;
  border-color: #1e7541;
  color: #ffffff;
  cursor: default;
}

.btn-vote.gestimmt:hover {
  transform: none;
}

.vote-icon {
  width: 14px;
  height: 14px;
}

.vote-plopp {
  animation: votePlopp 0.35s ease;
}

@keyframes votePlopp {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Leere Pinnwand */
.pinnwand-leer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--zettel-tinte-leise);
  font-size: 1.1rem;
  font-weight: 600;
}

/* --- Dialog / Modal zum Zettel-Anpinnen ----------------------------------- */
.feedback-dialog {
  color-scheme: dark;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: transparent;
  max-width: min(34rem, calc(100vw - 2rem));
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  margin: auto;
}

[data-theme="light"] .feedback-dialog {
  color-scheme: light;
}

.feedback-dialog::backdrop {
  background: rgba(9, 3, 20, 0.75);
  backdrop-filter: blur(4px);
}

.dialog-karte {
  position: relative;
  background: linear-gradient(180deg, var(--zettel-papier), var(--zettel-papier-fuss));
  border: 1px solid var(--zettel-rand);
  border-radius: 16px;
  padding: 2rem 1.8rem 1.6rem;
  color: var(--zettel-tinte);
}

.dialog-schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--zettel-admin-bg);
  color: var(--zettel-tinte-leise);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.dialog-schliessen:hover {
  background: var(--vote-btn-hover-bg);
  color: var(--zettel-tinte);
}

.dialog-karte h2 {
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--zettel-tinte);
}

.dialog-sub {
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
  color: var(--zettel-tinte-leise);
  line-height: 1.45;
}

.form-feld {
  margin-bottom: 1.1rem;
}

.form-feld label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--zettel-tinte-leise);
  margin-bottom: 0.35rem;
}

.form-feld select,
.form-feld input[type="text"],
.form-feld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--zettel-rand);
  background: var(--zettel-admin-bg);
  color: var(--zettel-tinte);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-feld textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-feld select {
  cursor: pointer;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bca9dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.2rem;
}

[data-theme="light"] .form-feld select {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23705322' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-feld select:focus,
.form-feld input[type="text"]:focus,
.form-feld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-15);
}

.form-feld select option {
  background-color: #1a1329;
  color: #f3eeff;
}

[data-theme="light"] .form-feld select option {
  background-color: #fffcf4;
  color: #2a2017;
}

.zeichen-zaehler {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--zettel-tinte-blass);
  margin-top: 0.25rem;
}

.form-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.btn-sekundaer {
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--zettel-rand);
  color: var(--zettel-tinte-leise);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-sekundaer:hover {
  background: var(--zettel-admin-bg);
}

.btn-primaer {
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--cta-grad-top), var(--cta-grad-bottom));
  color: var(--cta-fg);
  border: 1px solid var(--cta-border, transparent);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  transition: all 0.15s ease;
}

.btn-primaer:hover {
  transform: translateY(-1px);
  box-shadow: var(--cta-shadow-hover);
  filter: brightness(1.06);
}