/* Chat-Bot */

/* Reset */
*{margin:0; padding:0}

/* Elemente */
body{color: #1c211d; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; line-height:1.5; font-size:16px}
.all{max-width: 50rem; padding:1rem; margin:.5rem auto 250px; box-sizing: border-box;}
body.exit .all {max-width: 90%;margin: 10px auto;}
a.ds, a.danke{text-decoration:none; font-weight:700; color:#56841d}
a.ds:hover, a.danke:hover{border-bottom: 1px solid #56841d; padding-bottom:1px}
footer{
    padding: 10px 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;}

/* Flex-Properties */
.flex{display:flex; gap:10px}
.justify-start{justify-content: flex-start}
.justify-end{justify-content: flex-end}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.w-full {width: 100%;}
.w-fit {width: fit-content}
.items-center{align-items:center}
.items-end{align-items:flex-end}/* vert.align unten */
.shrink-0{flex-shrink:0}/* verbietet schrumpfen */
.grow{flex-grow:1}/* erlaubt wachstum */

/* Darstellung */
.bot img{display:block; width:36px}
.py-4{padding-top:16px; padding-bottom:16px}
.py-3{padding-top:12px; padding-bottom:12px}
.px-6{padding-left:24px; padding-right:24px}
.px-4{padding-left:16px; padding-right:16px}
.block{display:block;}


.bg-gray{background-color:#f2f4f0;}
@media screen and (min-width:550px){ 
.bg-gray{margin-right:32px}
}
.bg-green, .bg-green-input,.bg-green-input:hover{background-color:#ceeaa9}
.error-msg{color:#F95825; display:none} /* to-do:input-error: border definieren */
.bg-green:hover{background-color:#72b027}
.bg-gray, .bg-green,.bg-green-input, .bg-white{border:1px solid #bbc6c9;border-radius:8px}
.bg-white{background-color:#fff}
.time{padding-left:50px; height:24px; color: #95a3b5; font-size:14px; /* display:none */} /* platzhalter für Zeit */
.cursor-pointer{cursor:pointer} /* Haendchen */
.ul-n{list-style:none;}/* liste ohne Punkte */
.ul-n li{width: fit-content; /*line-height:27px*/ margin-bottom:3px}
.ul-ok li{background: transparent url("img/check.svg") no-repeat left 1px;
background-size: 22px 22px;padding-left:28px }
.ul-plus li{background: transparent url("img/plus.svg") no-repeat left 2px; 
background-size: 20px 20px;padding-left:28px }

/* fuer JavaScript */
section {display:none}
/* section {display:block} */
 section#section-1, .visible{display:block}


/* Icons SVG */
.paper-plan-arrow, .bearbeiten{display: flex;
align-items: center;justify-content: center;cursor:pointer;}
.paper-plan-arrow img,
.bearbeiten img{width:30px; height:30px; /*margin-right:50px; margin-top:8px;*/display:block}
.paper-plan-arrow img:hover,
.bearbeiten img:hover{filter: invert(50%) sepia(15%) saturate(2129%) hue-rotate(45deg) brightness(93%) contrast(81%);}

.choice-helper{font-size:0.8em; color: #95a3b5;font-size: 14px;}

.mult-choice p,.text-feld p,
input {
    flex: 1;        /* nimmt die gesamte restliche Breite */
    min-width: 0;         /* verhindert Überlaufen */
}
input{padding: 0.6em 0.8em;
      font-size: 1rem;
	  box-sizing: border-box;}

.width70{width: 75%;} /*temp class fuer anima */ 

/* Tabelle */
table{width:100%; border:1px solid #333; padding:2px}
th, td{border:1px solid #333;padding:2px 3px}
/* Scrollbalken */

html {  scrollbar-width: none;}
html::-webkit-scrollbar {  display: none;}

/* Variablen */
:root,:host {
	--color-text:#1c211d;
	--color-green: #72b027;
	--color-light-green: #ceeaa9;
	--color-light-grey:#f2f4f0;
	--color-border:#bbc6c9;
	--spacing: .25rem;
	--radius:.5rem;
	--border-invalid:#f95825;
	--color-dark-green: #56841d;
	--color-orange-error-msg: #F95825; /* FF5B00 */
	--color-texthelper: #95a3b5;/* Gray */
    
}