.notification {
  position:relative;
  border-radius:6px; 
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  margin-bottom:24px; 
  padding:18px 24px; 
    font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4em;
}

.notification--success { 
  color:#fff; 
  background: var(--ws10-color-secondary-500);
  border-radius: 6px;
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM364.25,186.29l-134.4,160a16,16,0,0,1-12,5.71h-.27a16,16,0,0,1-11.89-5.3l-57.6-64a16,16,0,1,1,23.78-21.4l45.29,50.32L339.75,165.71a16,16,0,0,1,24.5,20.58Z"/></svg>');
}

.notification--success::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.notification--error   { 
  background:#c62828; 
  color:#fff;
    border-radius: 6px;
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm0,319.91a20,20,0,1,1,20-20A20,20,0,0,1,256,367.91Zm21.72-201.15-5.74,122a16,16,0,0,1-32,0l-5.74-121.94v-.05a21.74,21.74,0,1,1,43.44,0Z"/></svg>');
 
}

.notification--error::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.notification--info    { 
  color:#fff;
background: var(--ws10-color-secondary-600);
  border-radius: 6px;
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z"/></svg>');
}
.notification--info::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.notification--floating {
  position: fixed;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 500px;
  width: calc(100% - 40px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease;
}
@keyframes slidein { from{transform:translateY(-12px); opacity:0;} to{opacity:1;} }

.notification__close {
  position:absolute; top:8px; right:8px; background:none; border:none; font-size:1.25rem; cursor:pointer;
}

.notification__progress {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  width: calc(100% + 48px);
  height: 100%;
  background-color: rgba(255, 255, 255, 0.15); /* etwas hellerer Balken */
  transform-origin: right;
  animation: shrinkLeft 7s linear forwards;
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
}
/* Keyframes für den Ladebalken */
@keyframes shrinkLeft {
  from {
      transform: scaleX(0);
  }
  to {
      transform: scaleX(1);
  }
}

/* inline-Variante bleibt statisch – kein Close-Button nötig */
.notification--inline { position:static; }


/* Banner-Layout */
.notification--banner {
  margin-bottom:32px;
  border-radius:6px;
  padding:18px 24px;
  position:relative;
}
.notification--banner.notification--error   { background:#c00000; color:#fff; }
.notification--banner.notification--success { background:#0a7d33; color:#fff; }
.notification--banner .notification__close  {
position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 500px;
  width: calc(100% - 40px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease;
}

.notification__content a { color:#fff!important; }



.input-error {
    border: 2px solid #cc0000 !important;
   background-color: #ffe5e5 !important;
}


/* Stacking-Container fixieren, darin Banner untereinander */
.notification-stack{
    position:fixed;
    top:110px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;               /* Abstand zwischen den Bannern */
    width:calc(100% - 40px);
    max-width:500px;
    z-index:9999;
}

/* einzelne Banner brauchen ab jetzt kein position:fixed mehr */
.notification-stack .notification--floating{
    transform:none;
    width:100%;
    position: static;
}






.floating-notification {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 500px;
  width: calc(100% - 40px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease;
}

.error-message {
  color: #fff;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4em;
  padding: 12px 16px;
  background: #c30000;
  border-radius: 6px;
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm0,319.91a20,20,0,1,1,20-20A20,20,0,0,1,256,367.91Zm21.72-201.15-5.74,122a16,16,0,0,1-32,0l-5.74-121.94v-.05a21.74,21.74,0,1,1,43.44,0Z"/></svg>');
}

.error-message {
  position: relative;
  overflow: hidden; /* wichtig für die animierte Leiste */
}

.error-message::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.info-message {
  position: relative;
  overflow: hidden; /* wichtig für die animierte Leiste */
  color: #fff;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4em;
  padding: 12px 16px;
  background: var(--ws10-color-secondary-600);
  border-radius: 6px;
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z"/></svg>');
}

.info-message::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.success-message {
  position: relative;
  overflow: hidden; /* wichtig für die animierte Leiste */
  color: #fff;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4em;
  padding: 12px 16px;
  background: var(--ws10-color-secondary-500);
  border-radius: 6px;
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48ZM364.25,186.29l-134.4,160a16,16,0,0,1-12,5.71h-.27a16,16,0,0,1-11.89-5.3l-57.6-64a16,16,0,1,1,23.78-21.4l45.29,50.32L339.75,165.71a16,16,0,0,1,24.5,20.58Z"/></svg>');
}

.success-message::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  display: inline-block;
  margin-right: 0.5em;
  flex-shrink: 0;
}


/* Fortschrittsanimation – Balken läuft von rechts nach links 
.notification-progress {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.15); 
  transform-origin: right;
  animation: shrinkLeft 7s linear forwards;
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
}

/* Keyframes für den Ladebalken 
@keyframes shrinkLeft {
  from {
      transform: scaleX(0);
  }
  to {
      transform: scaleX(1);
  }
}

*/


.close-notification-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
  display: flex;
  align-items: center;
}