body {
}

.dropapp-pin .dropapp-items.dropapp-pin {
   /*min-width: 480px;*/
   min-height: 400px;
   /*max-width: 100%;
   overflow-x: hidden;
   overflow-y: scroll;*/
}
.dropapp-pin hr {
	border-top: 1px solid #222;
	margin: 0;
	height: auto;
}
.dropapp-pin .dropapp-item {
   background-color: gainsboro;
   box-shadow:0 2px 8px #00000034; 
   cursor: grab;
   border-radius: 10px;
   width: 250px;
   padding: 10px;
   margin-bottom: 20px;
   position: absolute;
}
.dropapp-pin .dropapp-items .stecknadel {
   width: 20px;
   height: 20px;
   background-color: #ebebeb;
   border-radius: 50px;
   margin-left: auto;
   margin-right: 47%;
   border: solid 1px #333;
   box-shadow: -5px 3px 3px #0000003b;
}
.dropapp-pin .dropapp-item .dropapp-item-img > img {
   height: 110px;
   width: 100%;
   object-fit: cover;
   border-radius: 10px;
}
.dropapp-pin .dropapp-item .dropapp-item-date p {
   font-size: 0.9rem;
   position: absolute;
   top: 2px;
}
.dropapp-pin .dropapp-item .dropapp-item hr {
   margin-top: 5px;
   margin-bottom: 5px;
   border-top: 1px solid gray;
}
.dropapp-pin .dropapp-item .dropapp-item-name {
   margin-bottom: 5px;
   font-weight: 700;
}
.dropapp-pin .dropapp-item .dropapp-item-name h2 {
   font-weight: 700;
   margin-top: 10px;
   font-size: 1.05rem;
}
.dropapp-pin .dropapp-item .dropapp-item-img {
   margin-top: 15px;
}
.dropapp-pin .dropapp-item .dropapp-items.dropapp-pin {
   position: relative;
}

.dropapp-pin .dropapp-pin-form {
   background-color: gainsboro;
   box-shadow:0 2px 8px #00000034; 
   border-radius: 10px;
   width: 250px;
   z-index: 100;
   padding: 10px;
   margin-bottom: 20px;
   /*position: absolute;
   left: 10px;*/
}



.add-pin button {
   height: 40px;
   border-style: none;
   box-shadow:0 2px 8px #aaa; 
   border-radius: 10px;
   z-index: 100;
   transition: background-color 100ms ease-in;
}
.add-pin button:hover,
.add-pin button:visited {
   background-color: rgb(228, 228, 228);
   transition: background-color 200ms ease-in;
}

#pin-button {
   width: 40px;
   font-size: 2.5rem;
}



/* Delete Button */
.dropapp-pin .dropapp-item-delete,
.dropapp-pin .dropapp-item-edit {
   height: 40px;
   border-style: none;
   min-width: auto;
   min-height: auto;
   width: min-content;
   height: min-content;
   box-shadow: none;
   top: 10px;
   position: absolute;
   background-color: transparent;
}
.dropapp-pin .dropapp-item-delete {
   right: 6px;
}
.dropapp-pin .dropapp-item-edit {
   right: 30px;
}
.dropapp-pin .dropapp-item-delete:hover {
   background-color: transparent;
}
.dropapp-pin .dropapp-item-delete .fa-regular.fa-trash-can,
.dropapp-pin .dropapp-item-edit .fa-regular.fa-pen-to-square{
   font-size: 1.3em;
   transition: font-size 200ms ease-in;
}
.dropapp-pin .dropapp-item-delete .fa-regular.fa-trash-can:hover,
.dropapp-pin .dropapp-item-edit .fa-regular.fa-pen-to-square:hover{
   font-size: 1.5em;
   transition: font-size 200ms ease-in;
}
.dropapp-pin .dropapp-item-delete .fa-regular.fa-trash-can{
   color: #dc2727;
}


.dropapp-pin .add-pin {
   display: flex;
   width: fit-content;
   flex-direction: column;
   margin-left: 10px;
}

.dropapp-pin textarea {
   max-width: -webkit-fill-available;
}

.dropapp-pin .color-radios {
   display:flex; 
   gap:12px; 
   align-items:center; 
   flex-wrap:wrap;
   margin-bottom: 10px;
}

/* Input sichtbar für Screenreader, unsichtbar fürs Auge */
.dropapp-pin .color-radios input {
   position:absolute;
   inline-size:1px; 
   block-size:1px; 
   padding:0; 
   margin:-1px;
   overflow:hidden; 
   clip:rect(0 0 0 0); 
   white-space:nowrap; 
   border:0;
}

.dropapp-pin .color-radios label {
   --size:34px;
   inline-size:var(--size);
   block-size:var(--size);
   border-radius:50%;
   background:var(--c);
   position:relative;
   display:grid; place-items:center;
   cursor:pointer;
   /* äußerer Ring */
   box-shadow:0 0 0 2px rgba(255, 255, 255, 0.4);
   transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* fokusring für tastatur */
.dropapp-pin .color-radios input:focus-visible + label{
   outline:3px solid #222;
   outline-offset:3px;
}

/* Häkchen */
.dropapp-pin .color-radios label::after{
   content:"";
   inline-size:60%;
   block-size:60%;
   background:#fff;
   /* SVG-Häkchen als Maske */
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9.0 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9.0 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
   transform:scale(.5);
   opacity:0;
   transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .15s ease-out;
}

/* Ripple (zweiter Ring) */
.dropapp-pin .color-radios label::before{
   content:"";
   position:absolute; inset:0;
   border-radius:50%;
   box-shadow:0 0 0 0 rgba(0,0,0,.0);
   transform:scale(1);
   opacity:0;
}

/* checked-state: häkchen einblenden, pop & ripple */
.dropapp-pin .color-radios input:checked + label{
   animation:pop .22s ease-out;
   /* zusätzlicher farbiger Ring */
   box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.08),
      0 0 0 6px color-mix(in srgb, var(--c) 45%, white);
}

/* falls color-mix nicht unterstützt wird, ersetze die vorige Zeile durch:
   box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 0 6px rgba(0,0,0,.06); */

.dropapp-pin .color-radios input:checked + label::after{
   opacity:1;
   transform:scale(1);
}

.dropapp-pin .color-radios input:checked + label::before{
   opacity:1;
   animation:ripple .35s ease-out;
}

@keyframes pop {
   0%{transform:scale(.92)}
   60%{transform:scale(1.08)}
   100%{transform:scale(1)}
}

@keyframes ripple {
   0%{box-shadow:0 0 0 0 rgba(255,255,255,.65); transform:scale(.9)}
   100%{box-shadow:0 0 0 14px rgba(255,255,255,0); transform:scale(1.15)}
}


/*
 * Handy Ansicht, nicht movable
 */
@media screen and (max-device-width: 768px), screen and (max-width: 768px) {
   .dropapp-items.dropapp-pin {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      gap: 10px;
   }

   .dropapp-items.dropapp-pin p,
   .dropapp-items.dropapp-pin .form-control,
   .dropapp-items.dropapp-pin .add-pin {
      font-weight: 400;
   }
   
   .dropapp-pin .add-pin {
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-left: 0px;
   }

   .dropapp-pin .dropapp-item {
      position: relative;
      left: auto !important;
      top: auto !important;
   }

}


@media screen and (max-device-width: 480px), screen and (max-width: 555px) {
   .dropapp-items.dropapp-pin .dropapp-items {
      width: 100%;
   }

   .dropapp-pin .dropapp-pin-form {
      width: 100%;
   }
   .dropapp-pin .dropapp-item {
      width: 100%;
   }
}