body,html{margin:0;padding:0; color:var(--violet)} *,*::before,*::after{box-sizing:border-box; position:relative;}


@font-face {
  font-family: 'Allotrope';
  src: url('./fonts/AllotropeLight/font.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('./fonts/AllotropeRegular/font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('./fonts/AllotropeMedium/font.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Allotrope';
  src: url('./fonts/AllotropeBold/font.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Example usage */
body,input,textarea {
  font-family: 'Allotrope', sans-serif;
}


.state,.full{width:100%;height:100dvh;left:0;top:0; position: fixed;}
.state{display: none; }
.state.active{display: block;}

.nopoint{pointer-events: none;}

:root{

--gap:2rem;
--violet:#3C1053;
--pink:#FF8674;

}

img{width: 100%;}
.top{pointer-events: none;}
.loginpage{background-color: var(--violet);}
.loginpage input{text-align: center;}
.centered > div{display:flex;align-items:center; justify-content:center;height: 100dvh; flex-direction: column; gap:var(--gap);}

button{outline: none; min-width: 250px; text-transform: uppercase; border: none; border-radius: 1000px; background-color: var(--violet); padding: 1rem 2rem; padding-top: 1.1rem; font-size: 1.4rem; color: white;
font-size: 25px;
font-family: "Allotrope", sans-serif;font-weight: 700;
}
input{padding: 2rem; border-radius: 20px; outline: none; border:none; min-width: 420px; font-size: 1.4rem;}
input::placeholder{color: var(--pink); font-size: 1.4rem;}
input:focus::placeholder{color: white;}
button.pink{background-color: var(--pink); color: white;}
button.outline{background-color: white; color: white;border: 2px solid var(--violet); color: var(--violet);}

.wlogo{width: 366px;}

.introtext{width: 350px;}

.menu{position: fixed; bottom: 0;width: 100%;padding: 1rem; display: flex; justify-content: space-between; align-items: flex-end;}

.back{position: fixed; left: 0; top: 0; padding: var(--gap); width: calc(84px + 4rem);} 

.legalpage .legaltxt{width: 80%;}
.back{pointer-events: all;}

.rotate{background-color: var(--violet); display: none;}
@media screen and (orientation: landscape) {
.rotate{display: block;}
}

textarea{width: 350px;border: none; outline: none; font-size: 1.4rem; color: var(--violet); text-align: center; min-height: 8rem;}
textarea::placeholder{color: var(--pink); font-size: 1.4rem;}
textarea:focus::placeholder{color:white;}

.nachricht{max-width: 380px; text-align: center; overflow-x: hidden;}
    
.flowerboxes{ max-height: 538px; width: 600px;overflow-y: scroll; display: grid; gap: 1rem; padding-bottom: 12rem;}
.grad{width:100%;height:100%;left:0;top:0;position: fixed; bottom:0; pointer-events: none;
content: ""; background: linear-gradient(transparent 50%,white 80%); }


.box{width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; justify-content: space-between; padding: 1rem;
border:1px solid #EAEAEA;

height: 60px;
}

.box.belegt{border-left:4px solid var(--pink);}
.edit{width: 20px;}


svg{width: 100%;}