:root {
  --kk-primary:       #3b8f2c;
  --kk-primary-dark:  #006e3a;
  --kk-accent:        #e6b848;
  --kk-text:          #2d332d;
  --kk-bg:            #f5f3ee;
  --kk-shadow:        0 2px 16px rgba(59,143,44,.10);
  --kk-shadow-hover:  0 6px 24px rgba(59,143,44,.18);
  --kk-radius:        16px;
  --kk-radius-sm:     10px;
}

body {
  background-color: var(--kk-bg);
  color: var(--kk-text);
}

/* ---- Navbar ---- */
.navbar-kummerkasten {
  background-color: var(--kk-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.navbar-kummerkasten .navbar-brand,
.navbar-kummerkasten .nav-link {
  color: #fff !important;
}
.navbar-kummerkasten .nav-link:hover {
  color: var(--kk-accent) !important;
}
.navbar-kummerkasten .navbar-toggler {
  border-color: rgba(255,255,255,.5);
}
.navbar-kummerkasten .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* ---- Cards ---- */
.card {
  border: none !important;
  border-radius: var(--kk-radius) !important;
  box-shadow: var(--kk-shadow);
}
.card-header {
  border-radius: var(--kk-radius) var(--kk-radius) 0 0 !important;
  background-color: #fff;
  border-bottom: 1px solid rgba(59,143,44,.12) !important;
  font-weight: 600;
}

/* ---- Anliegen-Karten ---- */
.concern-card {
  border-left: 4px solid var(--kk-primary) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.concern-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kk-shadow-hover) !important;
}
.concern-card.resolved {
  opacity: .65;
  border-left-color: #adb5bd !important;
}

/* ---- Firmen-Badges ---- */
.badge-company-green  { background-color: #3b8f2c; color: #fff; }
.badge-company-blue   { background-color: #4a80c4; color: #fff; }
.badge-company-amber  { background-color: #c8921a; color: #fff; }
.badge-company-coral  { background-color: #c9563d; color: #fff; }
.badge-company-teal   { background-color: #2a9d8f; color: #fff; }
.badge-company-purple { background-color: #7c52a8; color: #fff; }

/* ---- Badges für Status ---- */
.badge-pending  { background-color: #8a9a8a; }
.badge-public   { background-color: var(--kk-primary); }
.badge-assigned { background-color: #4a90d9; }
.badge-archived { background-color: #6c757d; }

/* ---- Buttons ---- */
.btn {
  border-radius: 50px !important;
  font-weight: 500;
  letter-spacing: .01em;
}
.btn-primary {
  background-color: var(--kk-primary);
  border-color: var(--kk-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--kk-primary-dark);
  border-color: var(--kk-primary-dark);
}

/* ---- Alerts ---- */
.alert {
  border-radius: var(--kk-radius-sm) !important;
  border: none;
}
.alert-secondary {
  background-color: #eae8e3;
  color: var(--kk-text);
}

/* ---- Logo ---- */
.navbar-logo {
  height: 62px;
  width: auto;
}
.logo-login {
  height: 140px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* ---- Mascot ---- */
.mascot-img {
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  display: block;
}
.mascot-caption {
  font-size: .95rem;
  color: #5a6a5a;
  text-align: center;
  margin-top: .75rem;
  font-style: italic;
}

/* ---- Icon-Buttons ---- */
.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* ---- Karten-Grid ---- */
.letter-grid {
  max-width: 760px;
}

/* ---- Briefumschlag-Karten ---- */
.letter-card {
  background: #fdfaf3;
  border-radius: 4px 4px 14px 14px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(59,143,44,.10), 0 1px 4px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.letter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(59,143,44,.18);
}
.letter-card.resolved {
  opacity: .65;
}
.letter-flap {
  height: 38px;
  background: #ddd5bc;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: height .3s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.letter-card.open .letter-flap {
  height: 0;
  opacity: 0;
}
.letter-body {
  padding: 1rem 1.25rem 1.1rem;
}
.letter-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kk-text);
}
.letter-meta {
  font-size: .82rem;
  color: #7a8a7a;
  margin-bottom: .85rem;
}

/* ── Letter Modal ── */
.ltr-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.ltr-backdrop.open { opacity: 1; pointer-events: auto; }

.ltr-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
  width: min(660px, 92vw);
  pointer-events: none;
  perspective: 1200px;
  perspective-origin: 50% 0%;
}

.ltr-paper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.12);
  padding: 32px 36px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  transform-origin: 50% 0%;
  transform: rotateX(-94deg);
  opacity: 0;
  transition: transform .52s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  pointer-events: none;
}
.ltr-modal.open .ltr-paper {
  transform: rotateX(0deg);
  opacity: 1;
  pointer-events: auto;
}
.ltr-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 22px; line-height: 1; color: #6c757d;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  transition: background .15s, color .15s;
  z-index: 1;
}
.ltr-close:hover { background: rgba(0,0,0,.07); color: #333; }
.ltr-loading {
  text-align: center;
  padding: 48px 20px;
  color: #aaa;
  font-style: italic;
}

/* ---- Status-Stempel ---- */
.letter-stamp {
  display: inline-block;
  border: 2px dashed currentColor;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transform: rotate(3deg);
  line-height: 1.6;
  white-space: nowrap;
}
.letter-stamp-pending  { color: #8a9a8a; }
.letter-stamp-public   { color: var(--kk-primary); }
.letter-stamp-assigned { color: #4a90d9; }
.letter-stamp-archived { color: #6c757d; }
.letter-stamp-resolved { color: #6c757d; }
.letter-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: .8rem;
  color: #8a9a8a;
}
.letter-new-badge {
  background: var(--kk-accent);
  color: #2d332d;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 50px;
  letter-spacing: .04em;
}

/* ---- Effi-Flug-Animation ---- */
.effi-fly-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  overflow: hidden;
}
.effi-fly-bird {
  position: absolute;
  top: 22%;
  left: 0;
  width: 88px;
  height: auto;
  will-change: transform, opacity;
}
.effi-fly-bird.ltr {
  animation: effi-flight-ltr 3.4s ease-in-out forwards;
}
.effi-fly-bird.rtl {
  animation: effi-flight-rtl 3.4s ease-in-out forwards;
}
@keyframes effi-flight-ltr {
  0%   { transform: translateX(-120px)              translateY(0px)   scaleX(-1); opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translateX(22vw)                translateY(-50px) scaleX(-1); }
  50%  { transform: translateX(48vw)                translateY(18px)  scaleX(-1); }
  75%  { transform: translateX(76vw)                translateY(-35px) scaleX(-1); }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 120px)) translateY(-10px) scaleX(-1); opacity: 0; }
}
@keyframes effi-flight-rtl {
  0%   { transform: translateX(calc(100vw + 120px)) translateY(0px)   scaleX(-1); opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translateX(78vw)                translateY(-50px) scaleX(-1); }
  50%  { transform: translateX(52vw)                translateY(18px)  scaleX(-1); }
  75%  { transform: translateX(24vw)                translateY(-35px) scaleX(-1); }
  92%  { opacity: 1; }
  100% { transform: translateX(-120px)              translateY(-10px) scaleX(-1); opacity: 0; }
}
.effi-fly-letter {
  position: absolute;
  top: calc(22% + 60px);
  left: 50vw;
  font-size: 2rem;
  opacity: 0;
  animation: letter-fall 1.6s ease-in forwards;
  animation-delay: 1.5s;
}
@keyframes letter-fall {
  0%   { opacity: 1; transform: translateY(-20px) rotate(-18deg) scale(.9); }
  35%  { transform: translateY(50px)  rotate(12deg)  scale(1.1); }
  70%  { transform: translateY(110px) rotate(-6deg)  scale(1);   opacity: .9; }
  100% { transform: translateY(190px) rotate(8deg)   scale(.95); opacity: 0;  }
}
.effi-fly-msg {
  position: absolute;
  top: calc(22% - 48px);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--kk-primary);
  opacity: 0;
  animation: msg-fade 2s ease forwards;
  animation-delay: 1.0s;
}
@keyframes msg-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Leere Zustände ---- */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #6a7a6a;
}
.empty-state p {
  margin-bottom: 0;
  font-size: 1.05rem;
}