/* ===== GRBR IT Hottakes — Pinnwand-Look ============================== */

:root {
  /* Post-it-Farben: Fläche + etwas dunklere Kante fürs Falz-Gefühl */
  --yellow: #fff27a;  --yellow-edge: #f2df4e;
  --pink:   #ffb3c8;  --pink-edge:   #f58aa9;
  --mint:   #b8f2d0;  --mint-edge:   #8fe0b3;
  --blue:   #b3ddff;  --blue-edge:   #8ac6f2;
  --orange: #ffc887;  --orange-edge: #f7ab55;

  --ink: #33291a;           /* Schrift auf Zetteln */
  --ui-bg: #2a2016;
  --ui-line: rgba(255,255,255,.14);

  --ui-sans: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --hand: "Patrick Hand", "Caveat", cursive;
  --marker: "Permanent Marker", "Patrick Hand", cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--ui-sans);
  color: #f4ead6;
  min-height: 100vh;
  /* warmer, dunkler Holz-Hintergrund hinter dem Korkbrett */
  background:
    radial-gradient(120% 90% at 50% -10%, #6b4a2c 0%, #3c2a18 55%, #241708 100%) fixed;
}

/* ===== Topbar (saubere Sans, kein Zettel-Look) ====================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(#2a2016f2, #211910f2);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.topbar-inner {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 14px 22px 10px;
}
.brand h1 {
  font-size: clamp(20px, 2.4vw, 30px);
  margin: 0; letter-spacing: .2px; font-weight: 800; color: #ffe7a8;
}
.brand h1 .amp { color: #f0a500; }
.tagline { margin: 2px 0 0; font-size: 13px; color: #c9b48c; font-weight: 600; }

.tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

.search { position: relative; }
.search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); opacity: .6; font-size: 13px; }
.search input {
  width: 180px; padding: 9px 12px 9px 32px;
  border-radius: 999px; border: 1px solid var(--ui-line);
  background: #1b140c; color: #f4ead6; font: inherit; font-size: 14px;
}
.search input:focus { outline: none; border-color: #f0a500; }

.select {
  padding: 9px 12px; border-radius: 999px; font: inherit; font-size: 14px;
  border: 1px solid var(--ui-line); background: #1b140c; color: #f4ead6; cursor: pointer;
}

.btn {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 9px 16px; border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: #f0a500; color: #2a1c00; box-shadow: 0 4px 0 #a9760a; }
.btn-primary:hover { background: #ffb725; }
.btn-ghost { background: #1b140c; color: #f4ead6; border-color: var(--ui-line); }
.btn-ghost:hover { background: #2c2114; }

/* Kategorie-Chips */
.chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 2px 22px 12px;
}
.chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--ui-line); background: #1b140c; color: #d8c7a4;
  transition: all .12s ease;
}
.chip:hover { background: #2c2114; }
.chip.active { background: #f0a500; color: #2a1c00; border-color: #f0a500; }

/* ===== Korkbrett im Holzrahmen ===================================== */
.frame {
  position: relative;
  max-width: 1180px; margin: 26px auto 60px; padding: 20px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, #8a5a2c, #5e3a18);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.25),
    inset 0 2px 6px rgba(255,220,170,.25),
    0 30px 60px rgba(0,0,0,.45);
}
.board {
  position: relative; min-height: 62vh;
  border-radius: 6px; padding: 34px 26px;
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 30px 26px;
  /* Kork-Textur: gesprenkelte, mottled Fläche */
  background-color: #c1904f;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(96,58,20,.40) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 78%, rgba(96,58,20,.30) 0 1.5px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(64,38,10,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 62%, rgba(255,224,168,.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 8% 82%, rgba(64,38,10,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 60%, rgba(255,224,168,.22) 0 1.5px, transparent 3px);
  background-size: 91px 91px, 67px 67px, 113px 113px, 59px 59px, 83px 83px, 73px 73px;
  box-shadow: inset 0 0 60px rgba(60,34,10,.45);
}

.empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: #5c3f1f; text-align: center; pointer-events: none;
}
.empty[hidden] { display: none; }
.empty-pin { font-size: 46px; }
.empty p { font-family: var(--hand); font-size: 24px; line-height: 1.3; margin: 0; }

/* ===== Der Zettel (Post-it) ======================================== */
.note {
  --rot: 0deg;
  position: relative;
  width: 232px; min-height: 200px;
  padding: 26px 20px 16px;
  transform: rotate(var(--rot));
  transform-origin: 50% 12px;
  display: flex; flex-direction: column;
  background: var(--paper, var(--yellow));
  color: var(--ink);
  box-shadow:
    0 1px 1px rgba(0,0,0,.10),
    0 10px 22px rgba(0,0,0,.28);
  /* leicht ungerader Zettelrand */
  border-bottom: 3px solid var(--paper-edge, var(--yellow-edge));
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
}
.note:hover {
  z-index: 5;
  box-shadow: 0 4px 4px rgba(0,0,0,.14), 0 20px 38px rgba(0,0,0,.36);
  animation: wobble .5s ease;
}
@keyframes wobble {
  0%   { transform: rotate(var(--rot)); }
  25%  { transform: rotate(calc(var(--rot) - 2.2deg)) translateY(-3px); }
  60%  { transform: rotate(calc(var(--rot) + 1.6deg)) translateY(-3px); }
  100% { transform: rotate(var(--rot)); }
}

/* Farbvarianten */
.note.c-yellow { --paper: var(--yellow); --paper-edge: var(--yellow-edge); }
.note.c-pink   { --paper: var(--pink);   --paper-edge: var(--pink-edge); }
.note.c-mint   { --paper: var(--mint);   --paper-edge: var(--mint-edge); }
.note.c-blue   { --paper: var(--blue);   --paper-edge: var(--blue-edge); }
.note.c-orange { --paper: var(--orange); --paper-edge: var(--orange-edge); }

/* Reissnagel (Pin) */
.note .pin {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8f8f, #d61f1f 60%, #9c0f0f);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset -1px -1px 2px rgba(0,0,0,.3);
}
.note .pin::after {
  content: ""; position: absolute; top: 5px; left: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7);
}
/* Washi-Tape (Alternative zum Pin) */
.note .tape {
  position: absolute; top: -12px; left: 50%; width: 78px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 6px, rgba(255,255,255,.28) 6px 12px), #d9c7a0;
  opacity: .82; box-shadow: 0 2px 4px rgba(0,0,0,.18);
}

.note .cat {
  font-family: var(--ui-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #6b5330; opacity: .8; margin-bottom: 4px;
}
.note .content {
  font-family: var(--hand); font-size: 21px; line-height: 1.25;
  word-break: break-word; white-space: pre-wrap; flex: 1;
}
.note .subject {
  font-family: var(--marker); font-size: 14px; margin-top: 12px;
  color: #7a3b16; transform: rotate(-1.5deg);
}
.note .by { font-family: var(--ui-sans); font-size: 11px; color: #6b5330; opacity: .75; margin-top: 2px; }

.note .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; border-top: 1px dashed rgba(80,54,20,.35); padding-top: 8px;
}
.laugh {
  font: inherit; font-family: var(--ui-sans); font-weight: 700; font-size: 14px;
  cursor: pointer; border: none; background: rgba(255,255,255,.35);
  border-radius: 999px; padding: 5px 11px; color: #33291a;
  transition: transform .1s ease, background .12s ease;
}
.laugh:hover { background: rgba(255,255,255,.65); }
.laugh:active { transform: scale(1.25); }
.laugh.pop { animation: pop .35s ease; }
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
.note .date { font-family: var(--ui-sans); font-size: 10px; color: #6b5330; opacity: .6; }

/* ===== Modal / Formular ============================================ */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20,12,4,.6); backdrop-filter: blur(3px); }
.sheet {
  position: relative; z-index: 1; width: 100%; max-width: 480px;
  background: #fffdf5; color: #2c2416; border-radius: 16px; padding: 24px 24px 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5); max-height: 90vh; overflow: auto;
  animation: rise .2s ease;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { margin: 0 0 16px; font-size: 22px; color: #2c2416; }
.sheet-close { position: absolute; top: 14px; right: 14px; border: none; background: none; font-size: 18px; cursor: pointer; color: #8a7752; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 700; color: #6b5a38; }
.field textarea, .field input {
  font: inherit; font-size: 15px; padding: 11px 12px;
  border: 2px solid #e6dcc2; border-radius: 10px; background: #fff; color: #2c2416; resize: vertical;
}
.field textarea { font-family: var(--hand); font-size: 18px; }
.field textarea:focus, .field input:focus { outline: none; border-color: #f0a500; }
.counter { align-self: flex-end; font-size: 11px; color: #a89873; }
.row { display: flex; gap: 12px; }
.row .field { flex: 1; }

.cat-picker, .color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-opt {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 10px; border: 2px solid #e6dcc2; background: #fff; color: #4a3d22;
}
.cat-opt.sel { border-color: #f0a500; background: #fff6e0; }
.swatch { width: 34px; height: 34px; border-radius: 8px; cursor: pointer; border: 3px solid transparent; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.swatch.sel { border-color: #2c2416; }
.swatch.random {
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: conic-gradient(var(--yellow), var(--pink), var(--mint), var(--blue), var(--orange), var(--yellow));
}
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ===== Konfetti ==================================================== */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  will-change: transform, opacity; animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .2; }
}

.site-foot { text-align: center; padding: 10px 0 34px; }
.site-foot a { color: #b7a482; font-size: 13px; text-decoration: none; opacity: .7; }
.site-foot a:hover { opacity: 1; color: #ffe7a8; }

@media (max-width: 560px) {
  .tools { width: 100%; }
  .search input { width: 100%; }
  .search { flex: 1; }
  .row { flex-direction: column; }
  .note { width: 100%; max-width: 320px; }
}