body { background: linear-gradient( to bottom right, #b0b0d0, #d0d0b0); }
body { padding: 10px; margin:0 0; font-family:Arial; }
body { width:100vw; height:100vh; }

* { transform-origin:top left; }

body { box-sizing: border-box; _border:1px solid gray; padding:0; }

div.house { box-sizing: border-box; border:1px solid gray; }

div.house { width:100%; height:100%; margin:0 auto; overflow: hidden; }
div.house { box-shadow: 0px 0px 20px black; }

div.house#cover {
    position:absolute;
    z-index:2;
    background-color:black;
    margin:0;
}

/* h1, h2 {margin-left:2.5%; } */
/* h1 {margin-bottom:0} */
/* h2 {margin-top:0; font-weight:normal; } */

#splash {
    width:600px; 
    height:500px;
    border-radius:20px;
    border style:1px dotted lightgray;
    margin:0 auto; 
    position:relative; 
    top:50px; 
    bottom:50px;
    background-color:black;
    font-family:sans; 
    text-align:center; 
    font-size:50px;
    color:#e0e0e0;
}
#splash > div { 
    margin-bottom:.75ex;
}
#splash > div:first-child { 
    font-size:125%;
    color:red;
}


#shop {
    width:1000px; 
    border-radius:20px;
    margin:0 auto; 
    position:relative; 
    top:50px; 
    bottom:50px;
    background-color:black;
    font-family:sans; 
    text-align:center; 
    font-size:50px;
    color:#e0e0e0;
}
#shop > div { 
    margin-bottom:.75ex;
}
#shop > div:first-child { 
    font-size:125%;
    color:red;
}
#shop .shoptext {
    font-size:12pt;
}
#shop #product {
}

#logcoat {
    position:absolute;
    width:90%;
    left:5%;
    height:0;
}
#log {
    z-index:10000;
    font-family:mono;
    margin:0 auto;
    position:relative;
    top:20px;

    width: 40%;
    text-align: center;
    /* padding: 2px 10px; */
    /* border: 4px double red; */
    /* border-radius: 6px; */
    /* background-color: yellow; */
    display:none;

    font-size:14pt;
    color: white;
    border: 0.2ex dotted white;
    padding: 1ex;
    border-radius: 1ex;
    box-shadow: .5ex .5ex .25ex black;
    background-color: #000000a0;
}
#log.show {
    display:block;
}


div.wall { 
    margin:0 auto; 
    width:100%; 
    height:100%; 
    position:relative;
    background-color:black;
    background-image:url(wald.jpg);
    background-position:center;
    background-size:cover;
}

div.brick {  }

div.fourcol { width:22%; padding:1%; display:inline-block; }
div.twocol { width:44%; padding:1%; display:inline-block; }

div.fourcol > img { width:100%; }
div.fourcol > img { border-radius:10px; }
div.fourcol > img { box-shadow: -10px 10px 20px black; }

div.twocol > img { width:100%; }
div.twocol > img { border-radius:10px; }
div.twocol > img { box-shadow: -10px 10px 20px black; }


/* Gisela braucht monospace-font */
.mono { font-family:mono; }
/* Dieter braucht es so, wie es getippt ist */
pre.dieter {
    white-space: pre-wrap;
}
/* Andrea zitiert Brecht */
pre.andrea { }
/* Manche geben eine Quelle an */
div.author { font-style:italic; margin-left:8em; margin-top:1ex; font-size:90%; }


/* Teilnehmende */

div.teilnehmi { 
    min-height:200px;
    min-width:200px; 
    display:inline-block; 
    border-radius:10px; 
    background-color:#e8e8e8; 
    padding-bottom: 60px; 
    box-shadow: -10px 10px 20px black;
    vertical-align:bottom;
}
div.teilnehmi > img {
    max-height:400px;
    max-width:400px;
    border:1px solid gray;
    margin:1ex auto;
    display:block;
}
div.teilnehmi > .noimg {
    width:400px;
    height:5ex;
}
div.teilnehmi > div.name {
    margin:1ex 1em;
    text-align:center;
    font-size:200%;
}
div.teilnehmi > div.statement {
    margin:1ex auto;
    padding:0 1em;
    max-width:400px;
    margin:.5ex auto;
}
div.teilnehmi.dieter > div.statement {
    max-width:500px;
}


/* VornerNachher */

div.vorhernachher {
    display:inline-block;
    border-radius:10px; 
    background-color:#e8e8e8; 
    box-shadow: -10px 10px 20px black;
    vertical-align:top;
}
div.vorhernachher img {
    border:1px solid gray;
    margin:2ex;
    height:280px;
}
div.vorhernachher.square img {
    height:250px;
}
div.vorhernachher img:first-of-type {
    margin-right:0px;
}



/* Auto-positioned overlay bricks */
.max { width:100%; height:100%; }
.room { font-style:italic; color:white; position:absolute; }
.roomheading { font-style:italic; color:white; width:100%; text-align:center; }
.simpleroom { font-style:italic; color:white; }


/* Movies/image pairs */
div.bildfilm {
    display:inline-block;
    border-radius:10px; 
    background-color:#e8e8e8; 
    box-shadow: -10px 10px 20px black;
}
div.bildfilm div.img {
    margin:2ex;
    display:inline-block;
    vertical-align:top;
}
div.bildfilm img {
    border:1px solid gray;
    display:block;
    height:280px;
}
button.info {
    border: none;
    background-color: transparent;
    display: inline-block;
    padding: 1ex 1em;
    position: absolute;
    bottom: 1ex;
    left: 1ex;
}
button.info > span {
    background-color: lightgray;
    min-width: 2em;
    font-size: 7px;
    color: darkred;
    padding: .25ex .75em;
    text-align: center;
    border: 1px solid darkred;
    border-radius: 1em;
}

button.info + table {
    display:none;
    position: absolute;
    border: 2px solid black;
    border-radius: 1px;
    box-shadow: 1.5ex 1.5ex 2ex black;
    font-size: 9pt;
    bottom: 1ex;
    left: .5em;
    padding: .5ex;
    font-family: Arial narrow;
    background-color: darkgray;
}
button.info + table th {
    text-align:right;
    padding:0ex .25em;
}
button.info + table td {
    text-align:left;
    padding:0ex .25em;
}
button.info + table.show {
    display:block;
}
div.bildfilm div.video {
    margin:2ex;
    display:inline-block;
    vertical-align:top;
}
div.bildfilm img.preview, div.bildfilm video {
    border:1px solid gray;
    display:block;
    height:280px;
}
div.bildfilm img.preview + video {
    display:none;
}
div.video .button, div.vorhernachher .button, div.shopitem .button {
    background-color: #a0a0a0;
    background: linear-gradient(to bottom right, yellow, #909090 20%,#b0b0b0 100%);
    min-width: 6.5em;
    font-size: 10px;
    display: inline-block;
    padding: .5ex 1ex;
    text-align: center;
    border-radius: 5px 15px 5px 15px;
}
div.video {
    font-size:12pt;
}
div.video .pos {
    display: inline-block;
}
div.video .length {
    display: inline-block;
    float: right;
}
div.video .span {
    height: 1ex;
    background-color: black;
    display: inline-block;
}
div.bildfilm options {
    font-size: 10px;
}


/* Restaurant */
div.restaurant {
    margin:0 auto;
    width:3800px;
}

div.restaurant div.cat {
    display:inline-block;
    vertical-align:top;
}

div.restaurant div.cat .name {
    font-size:300px;
    text-align:center;
    color:#808080;
}

div.restaurant .menue { 
    width:30em;
    padding:4ex 2em;
    box-shadow: 0px 0px 1ex black;
    margin:2ex 2em;
    background-image:url("imgs/marmorpapier_cut.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display:inline-block;
}

div.restaurant h2, div.restaurant h3, div.restaurant h4 {
    margin-top:2ex;
    margin-bottom:.5ex;
}

div.restaurant li, div.restaurant ul { 
    padding-left:1em; 
}


/* Bildbeschreibungen */
div.beschreibung {
    display:inline-block;
    border-radius:10px; 
    background-color:#e8e8e8; 
    box-shadow: -10px 10px 20px black;
    vertical-align:middle;
}
div.beschreibung .original {
    position: relative;
    padding: 2ex;
}
div.beschreibung .original > img {
    border:1px solid gray;
    height:280px;
}
div.beschreibung .audio {
}
div.beschreibung .schrieb {
    position: absolute;
    left:2ex;
    right: 2ex;
    top:2ex;
    bottom: 2ex;
}
div.beschreibung .schrieb > img {
    max-width: calc(100% - 2ex);
    max-height: calc(100% - 2ex);
    left: 1ex;
    top: 1ex;
    bottom: 1ex;
    right: 1ex;
    position: absolute;
    opacity: 0;
    transition-property:opacity;
    transition-duration:1s;
}
div.beschreibung .schrieb.show > img {
    opacity: .92;
}
/* Buttons are invisible by default and bottom right ... */
div.beschreibung .schrieb ~ button {
    font-size:5pt;
    position: absolute;
    right: 1ex;
    bottom: 1ex;
    display:none;

    background-color: #a0a0a0;
    background: linear-gradient(to bottom right, yellow, #909090 20%,#b0b0b0 100%);
    padding: .5ex 1ex;
    text-align: center;
    border-radius: 5px 15px 5px 15px;
}
/* ... except for back-buttons, which are bottom left ... */
/* (as are the hard spoken descriptions) */
div.beschreibung .schrieb ~ button.hardplay,
div.beschreibung .schrieb ~ button.hardpause,
div.beschreibung .schrieb ~ button.prev
{
    left:1ex;
    right: auto;
}
/* ... and pause-buttons, which are visible by default (and turned off by JS) */
/* (as are hard play- and pause buttons) */
div.beschreibung .schrieb ~ button.softpause,
div.beschreibung .schrieb ~ button.hardplay,
div.beschreibung .schrieb ~ button.hardpause {
    display:initial;
}
/* Play button visible if last .schrieb is shown */
div.beschreibung .schrieb:last-of-type.show ~ button.softplay {
    display:initial;
}
/* Left button visible if first .schrieb is not shown and a later one is
 * (this implies more than one .schrieb) */
div.beschreibung .schrieb:first-of-type:not(.show) ~ .schrieb.show ~ button.prev {
    display:initial;
}
/* Right button visible if any .schrieb is shown and not the last one
 * (this implies more than one .schrieb) */
div.beschreibung .schrieb.show ~ .schrieb:last-of-type:not(.show) ~ button.next {
    display:initial;
}


/* SHOP */
div.shopitem {
    min-height:200px;
    min-width:200px; 
    display:inline-block; 
    border-radius:10px; 
    background-color:#e8e8e8; 
    box-shadow: -10px 10px 20px black;
    vertical-align:bottom;
    padding:1ex;
}
div.shopitem h3 {
    text-align:center;
    text-shadow: 2px 3px 19px darkred, -2px -5px 19px lightgray, 5px -3px 19px darkgray;
    font-size:20pt;
}
div.shopitem .toppiccoat {
    min-width:355px;
}
div.shopitem img.toppic {
    height:266.67px;
    border:1px solid gray;
    margin:1ex auto;
    display:block;
}
div.shopitem .price {
    clear:right;
    float:right;
    border:1px dotted gray;
    border-radius:10px;
    padding:2px 5px;
    text-align: right;
}
div.shopitem .price button {
    display:block;
    min-width: 11em;
}
div.shopitem .text {
    white-space: pre-wrap;
    max-width:400px;
}
div.shopitem .piclist {
    max-width: 400px;
    margin:1ex 0;
    display:block;
    vertical-align:middle;
    text-align:center;
}
div.shopitem .piclist > img {
    max-height:40px;
    max-width:40px;

    margin:0 5px;
    display:inline-block;
}
div.shopitem .piclist > img.active {
    box-shadow: 0px 0px 10px #800000;
    border: 2px solid #c0c0c0;
}

/* Munch */
div.munch {
    width: 650px;
    padding: 10ex;
    min-height:200px;
    border-radius:10px; 
    background-color:#181818c0;
    box-shadow: -10px 10px 20px black;
    display:inline-block;
    position: absolute;
    bottom: 0;
}
div.munch img.main {
    max-width:400px;
    max-height:400px;
    border:2px solid #383838;
    margin:2ex;
}
div.munch div.infobox {
    position:absolute;
    right:10ex;
    top:10ex;
}
div.munch button.info {
    color: white;
    padding: 1ex;
    border-radius: 1ex;
    box-shadow: .5ex .5ex .25ex black;
    background-color: #000000a0;
    font-size: 20px;
    border: 0.2ex dotted white;
    position: static;
    display: block;
}
div.munch div.infotarget {
    width:75%;
    left:5ex;
    top:5ex;
    font-size:150%;
    position:absolute;
    background-color: #303030f0;
    padding: 1ex;
    border-radius: 1ex;
    color: #d0d0d0;
display:none;
}
div.munch div.infotarget.show {
    display:initial;
}
.X {
    float:right;
    
}
/* KLOs */
div.klo img {
    width:100px;
}

/* BildText */
div.bildtext {
    display:inline-block;
    border-radius:10px; 
    background-color:#e8e8e8; 
    box-shadow: -10px 10px 20px black;
}
div.bildtext div.img {
    margin:2ex;
    display:inline-block;
    vertical-align:top;
}
div.bildtext div.text {
    margin:2ex;
    display:inline-block;
    vertical-align:top;
}
div.bildtext img {
    border:1px solid gray;
    display:block;
    height:280px;
}
div.bildtext img.traumfaenger {
    height:500px;
}


/* CENTER */
img.wald {
    margin:0 5%;
    width:90%;
    position:absolute;
}
button.speaker {
    font-size: 80px;
    color: white;

    border: 0.2ex dotted white;
    padding: 1ex;
    border-radius: 1ex;

    box-shadow: .5ex .5ex .25ex black;
    background-color: #000000a0;
}
button.speaker:hover {
    /* box-shadow: .5ex .5ex .5ex black; */
    background-color: #000000d0;
    text-decoration: underline;
}
button.speaker img {
    width:100px;
}
div.vorhernacher button.speaker {
    font-size:12pt;
}
div.vorhernacher button.speaker img {
    width:initial; height:20px;
}
div.munch button.speaker {
    font-size: 20px;
}
div.munch button.speaker img {
    width:25px;
}
.topmid {
    position:relative;
    top:100px;
    text-align:center;
    margin:0 auto;
}
button.speaker.left {
    position:absolute;
    left:calc(5% + 100px);
    bottom:100px;
}
button.speaker.right {
    position:absolute;
    right:calc(5% + 100px);
    bottom:100px;
}
button.speaker.right img {
    transform-origin:center; 
    transform:rotate(180deg);
}
button.soundpause img {
    position:relative;
    animation: zappel_x 3s infinite, zappel_y 3.65s infinite;
}
@keyframes zappel_x {
    0%   {left: 0px;}
    20%   {left: 1.2px;}
    30%   {left: -.5px;}
    60%   {left: .75px;}
    70%   {left: -1.3px;}
    90%   {left: 1.5px;}
}
@keyframes zappel_y {
    0%   {top: -1px;}
    20%   {top: 1.5px;}
    30%   {top: 0px;}
    50%   {top: 1.2px;}
    60%   {top: -.5px;}
    90%   {top: .75px;}
}
/* Sprechblasen */
div.sprechblasen img {
    height:280px;
}

/* OMA LINA */
div.oma {
    background-color:white;
    padding: 3ex 3em;
    width: 45em;
    font-family: mono;
    box-shadow: 10px 10px 20px black;
    font-size: 10pt;
}
div.oma pre {
    white-space: pre-wrap;
}


/* Katalog */
.katalog {
    width:30em;
}
.katalog ul {
    font-size:14pt;
    font-weight:bold;
    list-style-type:none;
}
.katalog li {
}
.katalog ul ul {
    font-size:12pt;
    font-weight:normal;
    margin-left:5em;
}
.katalog ul p {
    display:inline;
}
.katalog th {text-align:left;vertical-align:top;white-space: nowrap;}
.katalog td {vertical-align:top;}
.katalog th, .katalog td {padding-top:1ex; }

/* Metatext KUNST */
div.kunst {
    width:65em;

    column-count:2;
    column-fill: balance;
    column-gap:2em;

    font-size:10pt;
}
button.shopprev, button.shopnext {
    padding: 0 2em;
    border: 1px solid gray;
    border-radius: .5ex;
    min-width: 150px;
}

table.iban {
    margin: 0 auto;
    border-collapse: collapse;
}
table.iban th, table.iban td  {
    border: 1px solid lightgray;
    padding:.5ex 1em;
}
table.iban th {
    text-align:right;
}
table.iban td {
    text-align:left;
}
table.iban td.inter {
    font-size:80%;
    text-align:left;
    border:none;
}

/* Impressum */
div.impressum {
    font-size:14pt;
    color: white;
    border: 0.2ex dotted white;
    padding: 1ex;
    border-radius: 1ex;
    box-shadow: .5ex .5ex .25ex black;
    background-color: #000000a0;
    white-space: pre-line;
}
div.impressum a {
    color:#c0c0c0;
    text-deco
    text-decoration: underline dotted;
}
div.impressum a:hover {
    text-decoration: underline;
    color:white;
}

/* Gästebuch */
div.post {
    display:inline-block;
    font-size:40%;
    font-family:mono;
    width:30em;
    box-shadow: 0 0 10px;
    padding: .5ex .5em;
    border-radius: 1ex;
    border: 1px solid black;
    background-color: #d0d0d0;
}

div.wall * .tiny {
    display:none;
}