:root {
  --color-border: rgb(173, 121, 79);
  --card-border: 3mm;
  --card-corner: 3.5mm;
  --card-bg-border: 5mm;
  --bg-gradient1: #5a2724;
  --bg-gradient2: #60b347;

  --card-gap-V: 1mm;
  --card-gap-H: 1mm;

  --card-offset-X: 0mm;  
  --card-offset-Y: 0mm;

  --url-bg: "bgImg.png";
}

body, html {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#dnd-create-spellcards *:not(.ignoreAstrix) {
  font-size: 8pt;
  color: black;
}

#controls {
  max-height: 70vh;
  margin-top: 1rem;
  overflow-y: auto;
  position: fixed;
  background: rgb(240, 240, 240);
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 8px;
  z-index: 9999;
  max-width: 60ch;
  /* display: flex;# */
  & input[type='number']{
    width: 45px;
  }
   & input[type='file']{
    width: 100px;
    padding-left: 25px;
  }
   & input[type='color']{
    width: 100px;
  }
  & ul{
    padding-left: 0;
  }
  & *{
    margin-top: .2rem;
    display: inline-block;
    color: black;
  }
}
#controls h2, #controls h3 {
  cursor: pointer;
    display: block;
    margin: 0;
}

#controls .hide {
  display: none;
}

.sheed {
  background-color: white;
  outline: 1px black solid;
  margin: auto;
  width: 21cm;
  height: 29.7cm;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: var(--card-gap-V);
  column-gap: var(--card-gap-H);
}

.card {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
    
  width: 5.8cm;
  height: 8.4cm;
  position: relative;
  background-image: linear-gradient(var(--bg-gradient1), var(--bg-gradient2));
  padding: 3mm;
  & *{
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    margin: 0;
    padding: 0;
  }
}
.card:has(.card-bg){
  
    top: var(--card-offset-Y);
    left: var(--card-offset-X);
}

.card{
  & .titel {
    grid-column: span 3;
    height: fit-content;
    position: relative;

  }
  & .components {
    writing-mode: vertical-rl;
    /* vertikal von oben nach unten, rechts nach links */
    text-orientation: upright;
    /* sorgt für aufrechte Buchstaben */
    position: relative;
    grid-row: span 2;
    bottom: 0;
  }
  & hr {
    width: 80%;
    height: .5mm;
    border: none;
    margin: 0 auto;
    background: linear-gradient(to right, transparent, var(--color-border), transparent);
  }
  & .material {
    font-size: 6pt;
    min-height: 6pt;
  }
  
  
  & .description {
    grid-column: span 3;
    text-align: justify;
    text-align-last: none;

    &>p {
      font-size: 6.5pt;
      /* font-size: clamp(6pt, 1.5vw, 10pt);; */
    }
  }

  
  & .smal-info {

    margin-top: 1.5mm;
    text-align: center;
    padding: 1mm;
    border: var(--color-border) 2px solid;

    background-color: rgb(197, 194, 161);
    border-radius: calc(var(--card-corner)/2);

    &>h3 {
      min-height: calc(2*9pt);
      text-align: center;
    }

    &>p {
      font-size: 6pt;
      text-align: center;
    }
  }
  
  & .headline {
    background-color: rgb(197, 194, 161);
    border-radius: calc(var(--card-corner)/2);
    padding: 1mm;
    margin-right: 0.5cm;
    padding-right: 0.8cm;
    display: grid;
    grid-template-columns: auto minmax(1mm, 5mm);

    border: var(--color-border) 2px solid;

    &>.components {
      min-height: calc(3*8pt);
    }

    &>.shool {
      font-size: 6pt;
    }
  }
  & .level {
    position: absolute;
    background-color: rgba(51, 92, 33);
    color: white;
    font-size: 18pt;
    clip-path: polygon(50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%);
    aspect-ratio: .8;
    height: 130%;
    bottom: -15%;
    right: 1mm;
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
  }
  & .card-bg {
    position: absolute;
    top: var(--card-border);
    left: var(--card-border);
    right: var(--card-border);
    bottom: var(--card-border);
    padding: var(--card-bg-border) 2mm .5mm;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto minmax(40%, 100%) auto;
    column-gap: 1mm;
    row-gap: 1.5mm;
    background-color: linen;
    clip-path: polygon(var(--card-corner) 0%, calc(100% - var(--card-corner)) 0%, 100% calc(var(--card-corner)), 100% calc(100% - var(--card-corner)), calc(100% - var(--card-corner)) 100%, calc(var(--card-corner)) 100%, 0% calc(100% - var(--card-corner)), 0% calc(var(--card-corner)));
  }
  & .card-bg.card-folowup{
    color: red;
    grid-template-rows: auto minmax(40%, 100%) auto;
  }
  & .footer {

    grid-column: span 3;
    position: relative;


    &.folowup {
      position: absolute;
      width: 100%;
      height: fit-content;
      bottom: 0;
    }

    & p {
      text-align: center;
      position: relative;
      bottom: 0;
      padding-top: auto;
      text-align: justify;
      text-align-last: center;
    }

  }

  & p.footer-id {
    position: absolute;
    color: black;
    right: 2px;
    z-index: 100;
    bottom: 1px;
    font-weight: bolder;
    font-size: 7pt;
  }

  & div.footer-id {
    content: "";
    position: absolute;
    background-color: white;
    width: 20px;
    height: 10pt;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 50;
  }

}

.card-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* .footer-id p {
  position: absolute;
  color: black;
  right: 2px;
  z-index: 10;
  bottom: 1px;
  font-weight: bolder;
  font-size: 7pt;
} */



@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
 
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body>*:not(main){
    display: none;
  }
  main>*:not(#bodyForCards){
    display: none;
  }
  main{
    padding: 0;
  }

  #controls {
    display: none !important;
  }

  .sheed {
    margin: 0 auto;
    width: 21cm;
    height: 29.7cm;
    page-break-inside: avoid;
  }
}