@font-face{
    font-family: lobster;
    src: url(./fonts/lobster.otf);
}
@font-face{
    font-family: Berenika;
   src: url(./fonts/Berenika.ttf) 
}

/****************************************/
/********Allgemeine Elemente **********/
/******* Listen ***********/
#todolist{
   padding-left:3vw;
}

.featureslist, .declarefeatures 
{
    background-color:transparent;
}
.featureslist li, .declarefeatures li{
    margin: 0 3.0em 0.5em 0;
    border-radius: 0.3em;
    padding: 0.5em;
    background:linear-gradient(to right,transparent,#fffff0);
}

.declarefeatures li
{
border: 4px ridge #00c000;  
}

.featureslist li
{
border: 2px ridge #00c000;  
}
.featureslist li::first-line, .declarefeatures li::first-line
{
     font-weight:bold;
}
.featurestree
{
background-color:transparent;
}
.featurestree .top
{
border: 4px ridge #00c000;  
border-radius: 0.3em;
margin-top:0.5em;
}
.featurestree .top::first-line
{
     font-weight:bold;
}

/**********************************************************/

.Zahlungsarten
{
   word-break:break-word;
border: 4px solid #00c000;
}

.checksum
{
word-break:break-word;
 margin-bottom: 0.5em;
}
.checksum summary
{
font-weight:bold;
}
/*********** allgemeine Textformatierungen ************/
.text_title
{
     font-weight:bold;
     font-size: 1.5em;
}
.preface
{
    font-size: 1.2em;
}
.container
{
   margin: 0 1em 0 1em;
   border: 2px solid black;
border-radius: 0.5em;
}


/****** allgemeine Graphik-Elemente *******/

.Graph_LeftBrace
{
display:flex;
flex-direction: column;
height: 100%;
margin: 0;
padding-left:50%;
background-color: transparent;
flex: auto;
}

.Graph_LeftBrace #item_1
{
border-bottom: 1px solid black;
border-right: 2px solid black;
border-bottom-right-radius: 1em;
flex: auto;
}

.Graph_LeftBrace #item_2
{
border-top: 1px solid black;
border-right: 2px solid black;
border-top-right-radius: 1em;
flex: auto;
}

.Graph_RightBrace
{
display:flex;
flex-direction: column;
height: 100%;
margin: 0;
padding-right:50%;
background-color: transparent;
flex:auto;
}

.Graph_RightBrace #item_1
{
border-bottom: 1px solid black;
border-left: 2px solid black;
border-bottom-left-radius: 1em;
flex: auto;
}
.Graph_RightBrace #item_2
{
border-top: 1px solid black;
border-left: 2px solid black;
border-top-left-radius: 1em;
flex: auto;
}

.empty
{
flex: auto;
background-color: transparent;
}

/********** Person-Sprechblasen ****************/
.person1, .person2, .person3
{
    display: grid;
    grid-template-columns: 2em auto 2em;
    margin-top: 0.5em;
}
.person1 .person_text{
    background:linear-gradient(to right,transparent, #f0f0ff);
}
.person2 .person_text{
    background:linear-gradient(to right,#f0fff0,transparent);
}
.person3 .person_text{
    background: linear-gradient(to right,#fff0ff,transparent);
}

.left, .right
{
display: flex:
flex-direction:column;
}

.person1 .left, .person2 .right, .person3 .right
{
padding: 0.5em 0 0.5em 0;
background: transparent;
}
.person_text
{
     border-style: solid;
     border-color: black;
     border-radius: 0.5em;
}
.person_text p::first-line
{
    font-weight:bold;
}

.person1 .person_text
{
     border-width: 2px 2px 2px 0;
     text-align: left;
     margin-right: 2em;
}
.person2 .person_text 
{
      border-width: 2px 0 2px 2px;
      text-align: right;
      margin-left:2em;
}
.person3 .person_text
{
      border-width: 2px 0 2px 2px;
      text-align: center;
      margin-left:2em;
}

/***********************************************/
/***** level 0 *****/
body
{
   display:flex;
   flex-direction:column;
   background: repeating-linear-gradient(135deg, lightblue, white, lightblue 25%);
   margin: 0;
   padding-bottom: 3em;
   min-height: 30em;
}
/****** level 1 ********/
header
{
    flex:auto;
    display:flex;
    flex-direction:column;
}
main
{
    flex:auto;
    display:flex;
    flex-direction:column;
    background-color: transparent;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    
 }
footer{
   font-size: 1em;
   background-color:transparent;
 padding: 0;
}
/*********** level 2 ***************/
   /**** header ***********/

#title
{
    height: 8vw;
    display: grid;
    grid-template-columns: auto 12vw;
    margin:0vw;
    padding:0vw;
    
}
nav
{
      height: 3vw;
   flex:auto;
    display: flex;
   flex-direction:row;
  
}

.menubar{
    height: 3vw;
   display: flex;
   flex-direction:row;
   background-color: transparent;
   font-weight: bold;
    height: 0vw;
    padding:0vw;
    margin:0vw;
}
/********   main **************/

article{
   flex:auto;
   display:flex;
   flex-direction:column; 
    margin-left: 0;
    margin-top: 0;
    padding-top: 0;
    padding-right:1em;
    text-align: justify;
    background-color:transparent;
}
aside{
    flex:auto;
    display:flex;
    flex-direction:column; 
    margin: 0;
    background-color:transparent;
    padding-left:0;
}
/************************************/
/*********** level 3, 4...  ***************/
/************ title *************/
#title #title_text {
white-space:nowrap;
background: transparent; /*linear-gradient(to right,lightyellow,white);*/
font-family: lobster;
 margin:0vw;
    padding:0vw;
    overflow-x: hidden;
    text-align: center;
}

#title #logo {
width: 100%;
height:8vw;
background: transparent; 
margin:0;
padding: 0;
}
#title #logo .top,#title #logo .bottom
{

}
#title #logo p
{
font-size:4vw;
font-weight: bold;
color: darkgreen;
border-style: double none double none;
border-size: 1vw;
 text-align: center;
margin:1.5vw 0 1.5vw 0;
}


h1,h2,h3{
    margin:0vw;
}

#title #title_text h1{
    font-size: 2.0em;
   font-stretch: expanded;
}
#title #title_text h2{
    font-size: 1.0em;
    font-stretch: 200%;
}
#title #title_text h3{
    font-size: 1.5em;
    font-stretch: expanded;
}
/************* nav ********************/
nav ul{
    flex: auto;
     padding:0vw 0vw ;
    margin:0vw;
}
nav li{
   display: inline-block;
   background-color:#ffffff80 ;
   padding:0.2vw;
   border-radius:0.5vw;
   margin:0vw;
   font-size: 1.5vw;
   height: 1.5vw;
}
nav a{
    color:#100010;
}
nav a:visited{
    color:#200020;
}
nav li:hover{
    background-color:lightblue;
}

/**************** article *******************/
.dialog
{
 flex: auto;
display: flex:
flex-direction:column;
}