:root{
    --bg:#0b0d10; --panel:#12161b; --panel-2:#0e1317; --text:#eaf1f7; --muted:#9aa6b2;
    --accent:#22c55e; --accent-2:#16a34a; --border:rgba(255,255,255,.10);
    --shadow:0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
    --radius:18px;
  }
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    background:
      radial-gradient(1200px 600px at 20% -10%, #111827 10%, transparent 60%),
      radial-gradient(900px 600px at 100% 0%, #0d141c 30%, transparent 60%),
      var(--bg);
    font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  }
  .h-100{min-height:100svh}
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .card-title{color:var(--text)}
  .text-muted{color:var(--muted)!important}
  .form-control{
    color:var(--text); background:linear-gradient(180deg,#0f141a,#0c1015); border:1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03); border-radius:12px; padding:14px;
  }
  .form-control:focus{
    color:var(--text); background:#0f141a; border-color: rgba(34,197,94,.6);
    box-shadow: 0 0 0 0.25rem rgba(34,197,94,.12);
  }
  .btn{border-radius:12px; font-weight:800; letter-spacing:.3px; padding:12px 16px}
  .btn-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent-2) 70%);
    border:1px solid rgba(34,197,94,.8); color:#06290f;
  }
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-ghost{
    background:linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid var(--border); color:var(--text);
  }
  .alert{border-radius:12px}

/* Größen fein anpassen */
:root { --logo-size: 200px; --logo-radius: 28px; }

.logo-wrap { text-align:center; }

.logo-frame{
  position:relative;
  width:var(--logo-size);
  height:var(--logo-size);
  margin:0 auto;
  border-radius:var(--logo-radius);
  overflow:hidden;                           /* rund macht die schwarzen Eckkanten unsichtbar */
  box-shadow: 0 16px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Äußerer bunter Rahmen */
.logo-frame::before{
  content:"";
  position:absolute; inset:-2px;             /* leicht größer als der Frame */
  border-radius:inherit;
  background:
    conic-gradient(from 210deg,
      #22c55e 0%, #16a34a 25%, #0ea5e9 50%, #16a34a 75%, #22c55e 100%);
  z-index:0;
  opacity:.95;
}

/* Inneres Paneel – lässt nur den Rahmen stehen */
.logo-frame::after{
  content:"";
  position:absolute; inset:6px;              /* Rahmendicke = 6px */
  border-radius: calc(var(--logo-radius) - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.06);
  z-index:1;
}

/* Bild selbst */
.logo-img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:contain;
  border-radius: calc(var(--logo-radius) - 10px);
  padding:18px;                              /* Luft zum Rand */
  background: transparent;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}

/* Optional: sanfte Rotation des Farb-Rings */
.glow::before{ animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Wenn du den Ring dicker/dünner willst: inset in ::after ändern (z.B. 10px/4px) */


/* hier beginnen jetzt die Messages */

/* Bereich für Toasts – zentriert am unteren Rand */
.toast-area{
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: min(92vw, 720px);
    display: grid;
    gap: 12px;
    z-index: 9999;
    pointer-events: none; /* Klicks nur auf Buttons */
  }
  .toast-area * { pointer-events: auto; }
  
  /* Grundstil der Notices */
  .notice{
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    border-radius: 16px;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
    animation: toast-in .35s ease-out both;
    position: relative;
  }
  
  /* feiner Gradient-Rand */
  .notice::before{
    content:"";
    position:absolute; inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent,#22c55e), #0ea5e9);
    z-index: -1;
    mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    border-radius: inherit;
  }
  
  /* Icon-Badge */
  .notice .icon{
    display:grid; place-items:center;
    width: 28px; height: 28px; border-radius: 10px;
    color: #06290f;
    background: linear-gradient(135deg, var(--accent,#22c55e), #16a34a 70%);
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  }
  
  /* Text */
  .notice .msg{
    font-size: 16px;
    line-height: 1.35;
    color: #eaf1f7;
  }
  
  /* Close-Button */
  .notice .close{
    appearance:none; border:0; background:transparent;
    color:#cfd6dd; font-size:18px; line-height:1;
    padding:6px 8px; border-radius:10px; cursor:pointer;
  }
  .notice .close:hover{ background: rgba(255,255,255,.07); }
  
  /* Varianten */
  .notice.success{ --accent:#22c55e; }
  .notice.error  { --accent:#ef4444; }
  .notice.info   { --accent:#0ea5e9; }
  
  /* Ein-/Ausblend-Animation */
  @keyframes toast-in{
    from { opacity:0; transform: translateY(8px) scale(.98); }
    to   { opacity:1; transform: translateY(0)  scale(1); }
  }
  
  /* Optional: sanfter, periodischer Halo für Success */
  .notice.success .icon{
    animation: pulse 2.8s cubic-bezier(.65,0,.35,1) infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 0 0 rgba(34,197,94,.0); }
    40%{ box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 0 10px rgba(34,197,94,.10); }
    100%{ box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 0 0 rgba(34,197,94,.0); }
  }
  
  /* Respektiert “Bewegung reduzieren” */
  @media (prefers-reduced-motion: reduce){
    .notice, .notice .icon{ animation: none !important; }
  }