/* NOVA Universe · Ko-fi Support · Desktop offen, mobil klappbar, kompakt, non-sticky */
.nova-support-kofi{
  --nova-support-cyan:#42ddff;
  --nova-support-blue:#178cff;
  --nova-support-deep:#041a33;
  width:100%;
  box-sizing:border-box;
  margin:12px 0 0;
  border-radius:18px;
  border:1px solid rgba(74,215,255,.72);
  background:#061c35;
  box-shadow:0 10px 28px rgba(7,62,116,.16),0 0 0 3px rgba(49,194,255,.06);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  container-name:nova-support;
}
.nova-support-kofi__toggle{
  appearance:none;
  position:relative;
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border:0;
  background:
    radial-gradient(circle at 84% 12%,rgba(255,211,113,.40) 0 2%,rgba(255,211,113,.10) 3%,transparent 12%),
    radial-gradient(ellipse at 82% 132%,rgba(23,151,218,.75) 0 20%,rgba(4,73,126,.88) 21% 37%,rgba(2,26,52,0) 38%),
    linear-gradient(105deg,#06213f 0%,#073a6b 52%,#075c91 76%,#06213f 100%);
  color:#fff;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}
.nova-support-kofi__toggle::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0 44%,rgba(49,220,255,.08) 58%,transparent 76%);
}
.nova-support-kofi__mark{
  position:relative;
  z-index:1;
  width:52px;
  height:48px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.28));
}
.nova-support-kofi__mark .nova-support-hands{
  font-size:35px;
  line-height:1;
  display:block;
}
.nova-support-kofi__copy{position:relative;z-index:1;min-width:0;display:flex;align-items:center;min-height:32px}
.nova-support-kofi__copy strong{font:900 22px/1.12 Space Grotesk,system-ui,sans-serif;letter-spacing:-.015em;color:#fff;text-shadow:0 0 16px rgba(67,217,255,.12)}
.nova-support-kofi__copy strong em{font-style:normal;font-size:.9em;font-weight:900;color:#f2fbff;margin-left:8px;white-space:nowrap;letter-spacing:-.01em}
.nova-support-thanks-heart{display:inline-block;font-size:1.65em;line-height:1;vertical-align:-0.06em;transform-origin:center;filter:drop-shadow(0 0 10px rgba(255,92,129,.18))}
.nova-support-kofi__chevron{
  position:relative;
  z-index:1;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(168,237,255,.62);
  background:linear-gradient(145deg,#118eff,#18c9ee);
  color:#fff;
  font-size:20px;
  font-weight:950;
  box-shadow:0 0 18px rgba(36,196,255,.28);
  transition:transform .22s ease;
}
.nova-support-kofi.is-open .nova-support-kofi__chevron{transform:rotate(180deg)}
.nova-support-kofi__panel[hidden]{display:none!important}
.nova-support-kofi__panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:16px;
  padding:16px;
  border-top:1px solid rgba(98,205,242,.32);
  background:
    radial-gradient(circle at 84% 0,rgba(40,181,255,.10),transparent 36%),
    linear-gradient(145deg,#071c34,#06172b 58%,#071e38);
  color:#eaf7ff;
}
.nova-support-kofi__info{
  min-width:0;
  padding:4px 6px;
}
.nova-support-kofi__info h3{margin:0 0 8px;font:900 18px/1.2 Space Grotesk,system-ui,sans-serif;color:#fff}
.nova-support-kofi__info p{margin:0;color:#c7dded;font:700 13px/1.5 Inter,system-ui,sans-serif;max-width:520px}
.nova-support-kofi__payment{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:7px;
  padding:12px;
  border-radius:15px;
  border:1px solid rgba(93,198,239,.28);
  background:rgba(4,23,43,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.nova-support-kofi__payment b{font:900 18px/1.2 Inter,system-ui,sans-serif;color:#fff;text-align:center}
.nova-support-kofi__payment small{font:700 14px/1.45 Inter,system-ui,sans-serif;color:#cfe8f6;text-align:center}
.nova-kofi-note-large{display:block;margin-top:4px;font:900 24px/1.22 Inter,system-ui,sans-serif;color:#ecf9ff;letter-spacing:-.01em;text-align:center}
.nova-kofi-widget-slot{display:grid;gap:12px;width:100%}
.nova-kofi-primary-link{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(143,220,255,.58);background:linear-gradient(135deg,#eaf4ff,#cfe2ff 48%,#afd4ff);color:#14355b;box-shadow:0 12px 24px rgba(52,120,219,.18);font:800 13px/1.1 Inter,system-ui,sans-serif;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease}
.nova-kofi-primary-link:hover,.nova-kofi-primary-link:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(132,225,255,.68),0 0 18px rgba(66,221,255,.26),0 0 30px rgba(38,152,255,.14);outline:none;background:linear-gradient(135deg,#f7fbff,#deeeff 46%,#b8dcff);color:#0e3158}

.nova-support-kofi:hover,.nova-support-kofi:focus-within{box-shadow:0 14px 34px rgba(7,62,116,.22),0 0 0 3px rgba(49,194,255,.10),0 0 22px rgba(66,221,255,.12)}
.nova-support-kofi:hover .nova-support-thanks-heart,.nova-support-kofi:focus-within .nova-support-thanks-heart{animation:novaSupportHeartPulse .9s ease-in-out infinite alternate;filter:drop-shadow(0 0 12px rgba(255,92,129,.40))}
@keyframes novaSupportHeartPulse{0%{transform:scale(1)}100%{transform:scale(1.28)}}
/* Helles NOVA-Theme: Support-Komponente bleibt bewusst als dunkles Plattform-Band erhalten. */
body:not(.dark-mode):not(.dark-mode-theme) .nova-support-kofi{box-shadow:0 12px 28px rgba(24,73,121,.13),0 0 0 3px rgba(49,194,255,.06)}

/* Desktop: kompakter Support-Bereich bleibt offen; Kopfzeile ist nur Anzeige. */
@media (min-width:761px){
  .nova-support-kofi__toggle{cursor:default;grid-template-columns:auto minmax(0,1fr);min-height:78px;padding:13px 18px}
  .nova-support-kofi__chevron{display:none}
  .nova-support-kofi__panel{grid-template-columns:minmax(0,1fr) 420px}
  .nova-support-kofi__payment{min-width:0}
}

@media (max-width:760px){
  .nova-support-kofi{
    width:calc(100% - 24px);
    margin:12px 12px 14px;
    border-radius:17px;
  }
  .nova-support-kofi__toggle{
    min-height:82px;
    grid-template-columns:50px minmax(0,1fr) 32px;
    gap:9px;
    padding:10px 11px;
    background:
      radial-gradient(circle at 88% 10%,rgba(255,211,113,.40) 0 2%,rgba(255,211,113,.10) 3%,transparent 13%),
      radial-gradient(ellipse at 86% 129%,rgba(23,151,218,.76) 0 18%,rgba(4,73,126,.88) 19% 35%,rgba(2,26,52,0) 36%),
      linear-gradient(110deg,#06213f 0%,#073a6b 58%,#075c91 79%,#06213f 100%);
  }
  .nova-support-kofi__mark{width:46px;height:42px}
  .nova-support-kofi__mark .nova-support-hands{font-size:31px}
    .nova-support-kofi__copy strong{font-size:16px}
  .nova-support-kofi__copy strong em{display:block;margin:2px 0 0;font-size:.8em}
  .nova-support-thanks-heart{font-size:1.42em}
  .nova-support-kofi__chevron{width:30px;height:30px;font-size:17px}
  .nova-support-kofi__panel{grid-template-columns:1fr;gap:11px;padding:12px}
  .nova-support-kofi__info{padding:1px 2px}
  .nova-support-kofi__info h3{font-size:15px;margin-bottom:6px}
  .nova-support-kofi__info p{font-size:11.5px;line-height:1.45}
  .nova-support-kofi__payment{padding:10px}
  .nova-kofi-note-large{font-size:17px}
  .nova-kofi-widget-slot{gap:10px}
  .nova-kofi-primary-link{min-height:44px;font-size:12.5px}
}


@media (max-width:390px){
  .nova-support-kofi{width:calc(100% - 16px);margin-left:8px;margin-right:8px}
  .nova-support-kofi__toggle{grid-template-columns:44px minmax(0,1fr) 28px;gap:7px;padding:9px}
  .nova-support-kofi__copy strong{font-size:15px}
  .nova-support-kofi__chevron{width:27px;height:27px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .nova-support-kofi__chevron{transition:none}
  .nova-support-kofi:hover .nova-support-thanks-heart,.nova-support-kofi:focus-within .nova-support-thanks-heart{animation:none}
}

/* V555: Auf die Breite der Kachel reagieren, auch im Handy-Desktopmodus. */
@container nova-support (max-width:680px){
 .nova-support-kofi__panel{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
 .nova-support-kofi__info,.nova-support-kofi__payment{min-width:0;max-width:100%;box-sizing:border-box}
 .nova-support-kofi__info h3{font-size:16px}
 .nova-support-kofi__info p{font-size:12px;line-height:1.5}
 .nova-support-kofi__payment{padding:12px}
 .nova-support-kofi__toggle{padding:12px;gap:10px}
 .nova-support-kofi__copy strong{font-size:18px}
 .nova-support-kofi__copy strong em{white-space:normal}
}
