:root { /* will be overridden by JS */
        --size:  0.5;
        --width: 1;
    }

    @font-face { 
            font-family: 'croissant';
            src: url('../fonts/CroissantOne-Regular.ttf') format('truetype'); 
            }
	@font-face { 
            font-family: 'compliant';
            src: url('../fonts/compc3s.ttf') format('truetype'); 
    }
   	@font-face{ 
            font-family: 'anke';
            src: url('../fonts/ankecallig-fg.ttf') format('truetype');
    }
    body {
            background-image: url("../layout/cafe-klein.jpg");
            background-color:rgba(0, 0, 0, 0.9);
            background-size: 100%;
            /*background-size: 111em 74em;*/
            background-repeat: no-repeat;
            background-position: center top;
            font-family:croissant;
    }
    
    /** Größere Monitore **/
    @media only screen and (min-width: 1200px) {
    body {
            background-image: url("../layout/cafe-768771_1920_klein.jpg");
            }
    }
    
    #myVideo {
            position: fixed;
            left: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            z-index:-1;
    }
	
    #cookie-statement {
            position:fixed;
            z-index:50;
            width:100%;
            min-height:56px;
            top:0;
            background-color:rgba(90,90,190,0.8);
            color:#fff;	
            font-size: 0.7em;
            font-weight:bold;
            padding:10px;
            padding-top:25px;
            text-align:center;
    }
    #cookie-statement span {
            margin-right:4px;
    }
    #cookie-statement a {
            display:inline-block;
            background-color:#303090;
            border:1px solid rgba(0,0,0,0.1);
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
            border-radius:2px;
            color:#fff;
            cursor:pointer;
            padding:4px 8px;
            margin-top:4px;
            text-align:right;
    }
    p#randabstand {
            position: relative;
            clear: all;
            float: center;
            height: calc(var(--size) * 20em);
    }
    div#postit {
            position: relative;
            margin-left:calc(var(--width) * -3.5em);
            background: url("../layout/postit1.png");
            background-size: cover;
            text-align: left;
            font-family: anke, Times New Roman, serif;
            font-size: calc(var(--width) * 1.2em);
            /*-moz-transform: scale(var(--width));*/
            font-weight: light; 
            text-shadow: 1px 1px 2px #333355;
            color: black;
            width: calc(var(--width) * 20em);
            -moz-min-content: calc(var(--size) * 20em);
            padding: calc(var(--width) * 0em) calc(var(--width) * 1em) calc(var(--width) * 1em) calc(var(--width) * 6em);
            border: none;
    }
    div#postit li {
            font-size: calc(var(--width) * 1em);
    }
    div#postit a {
            color: #444; 
    }  
    div#feld   {
            margin: calc(var(--width) * 1.5em);
            margin-left: calc(var(--width) * 1.8em);
            background: rgba(20,20,20,0.8);
            text-align: left;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 2.5em);
            font-weight: bold;
            color: white;
            width: calc(var(--width) * 20.5em);
            box-sizing: border-box;
            padding: calc(var(--width) * 0.75em);
            border: 3px solid black;
            border-radius: calc(var(--width) * 0.4em);
    }
    /** Groessere Monitore **/
    @media only screen and (min-width: 1200px) {
    div#feld {
            margin-left: calc(var(--width) * -11.5em);
            width: calc(var(--width) * 27.7em);
            }
    }
	div#tisch   {
            margin: calc(var(--width) * 1.5em);
            background: rgba(20,20,20,0.8);
            text-align: center;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 2.5em);
            font-weight: bold;
            color: white;
            width: calc(var(--width) * 6em);
            box-sizing: border-box;
            padding: calc(var(--width) * 0.75em);
            border: 3px solid black;
            border-radius: calc(var(--width) * 0.4em);
    }
	div#feldchen   {
            margin: calc(var(--width) * 1.0em);
            background: rgba(220,220,220,0.8);
            text-align: left;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 1.2em);
            font-weight: bold;
            color: black;
            width: calc(var(--width) * 27em);
            box-sizing: border-box;
            padding: calc(var(--width) * 0.8em);
            padding-top: calc(var(--width) * 1em);
            border: 2px solid black;
            border-radius: calc(var(--width) * 0.4em);
    }
	div#inhalt   {
            margin-top: calc(var(--width) * 1em);
            background: rgba(220,220,220,0.8);
            text-align: center;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 5em);
            font-weight: bold;
            color: black;
            min-width: calc(var(--width) * 20em);
            box-sizing: border-box;
            padding-top: calc(var(--width) * 8em);
            padding-bottom: calc(var(--width) * 8em);
            border: 2px solid black;
            border-radius: calc(var(--width) * 0.4em);
    }
	div#buttonline {
            clear:left;
            float:center;
            max-width:calc(var(--width) * 27.7em);
    }
    select   {
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--width) * 1em);
            font-weight: bold;
            margin-bottom: calc(var(--width) * 0.3em); 
            padding:calc(var(--width) * 0.3em); 
            background: rgba(224,224,224,0.8);
            border-radius: calc(var(--width) * 0.2em);
    }
    select#klein   {
            font-size: calc(var(--width) * 1.0em);
            }
	input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    textarea { 
            margin-top: calc(var(--width) * 0.3em);
            margin-bottom: calc(var(--width) * 0.3em);
            background: rgba(220,220,220,0.8);
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--width) * 1em);
            font-weight: bold;
            min-width: 97%;
            padding: calc(var(--width) * 0.3em);
            outline: none;
            border: 2px solid transparent;
            border-radius: calc(var(--width) * 0.2em);
    }
    /** Größere Monitore **/
    @media only screen and (min-width: 1200px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    textarea {
            min-width: 97%;
            }
    }     
    input[type=checkbox] {
            /* Nearly Double-sized Checkboxes */
            -webkit-transform: scale(1); /* Safari and Chrome */
            -moz-transform: scale(2); /* FF */
            -ms-transform: scale(2); /* IE */
            -o-transform: scale(2); /* Opera */
            padding: calc(var(--width) * 3em);
            border: 2px solid black;
    }
    /** Größere Monitore **/
    @media only screen and (min-width: 1200px) {
    input[type=checkbox] {
            /* Nearly Double-sized Checkboxes */
            -webkit-transform: scale(1); /* Safari and Chrome */
            -moz-transform: scale(1); /* FF */
            -ms-transform: scale(1); /* IE */
            -o-transform: scale(1); /* Opera */
            }
    }     
    input:focus {
            border: 3px solid #ffcc33;
    }
    input[type="button"] {
            margin-top: calc(var(--width) * 1em);
            background: rgba(0,0,0,0.9);
            text-align: center;
            color: white;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 2.5em);
            font-weight: bold;
            width: calc(var(--width) * 15em);
            box-sizing: border-box;
            padding: calc(var(--width) * 0.75em);
            border: calc(var(--width) * 0.2em) outset #888888;
            border-radius: calc(var(--width) * 0.5em);
    }
    input#klein {
            min-width: 3%;
	}
	div#buttonline {
            clear:left;
            float:center;
            max-width:calc(var(--width) * 27.7em);
    }
	div#tisch input   {
            min-width: 4%;
            text-align: center;
    }
    a     { 
            color:white; 
            text-decoration:none;
    }
    .reiter { float: left;
            background: rgba(40,40,40,0.9);
            padding: calc(var(--width) * 0.5em);
            width: calc(var(--width) * 45.5%);
            border: calc(var(--width) * 0.13em) outset #888888; 
            border-radius: calc(var(--width) * 0.6em) calc(var(--width) * 0.6em) 0 0;
            border-style: outset outset inset outset;            
            z-index:-1;
            text-align: center;
            color: white;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 1.5em);
            font-weight: bold;
     }
    /** Groessere Monitore **/
    @media only screen and (min-width: 1200px) {
    .reiter {
            border: calc(var(--width) * 0.3em) outset #888888; 
            width: calc(var(--width) * 31%);
            }
    }     
    .kartei {
            clear: both;
            position: relative;
            float: left;
            text-align: center;
            margin-top: calc(var(--width) * -0.3em);
            padding: calc(var(--width) * 2em);
            background: rgba(0,0,0,0.9);
            width: calc(var(--width) * 90%);
            border: calc(var(--width) * 0.2em) outset #888888;
            border-style: none outset outset outset; 
            border-radius: 0 0 calc(var(--width) * 0.7em) calc(var(--width) * 0.7em);
            }
    /** Groessere Monitore **/
    @media only screen and (min-width: 1200px) {
    .kartei {
            margin-top: calc(var(--width) * -0.22em);
            width: calc(var(--width) * 58%);
            }
    }
    .button { 
            min-height: calc(var(--width) * 3em);
            text-align: left;
            vertical-align: middle;
            color: white;
            font-family: croissant, Droid Sans Fallback, sans-serif;
            font-size: calc(var(--size) * 2.5em);
            font-weight: bold;
            cursor:default;
            width: calc(var(--width) * 15em);
            box-sizing: border-box;
            padding: calc(var(--width) * 0.75em);
            padding-left: calc(var(--width) * 2em);
            border: calc(var(--width) * 0.2em) outset #888888;
            border-radius: calc(var(--width) * 0.5em);
    }