@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,600,700&display=swap');

/* @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900&display=swap'); */

/* Farbdefinitionen
background-color: #e0dad0; tasten
background-color: #c0bab0; tasten:hover
background-color: #FdFdFA; body & table h3
background-color: #F3F3F0; header footer
background-color: #fff; textbox table tab.active
color: #ooo p
color: #555; font-header font-footer
color: #807873; h3 p.b p.o
color: rgb(100, 100, 100); link link.visited  */

body {margin: 0; padding: 0px; background-color: #FdFdFA;}

a {color: #oo9; font-family: Ubuntu;font-weight: 400;}
a:link {color: #009;text-decoration: none;}
a:visited {color: #807873; text-decoration: none;}
a:hover {color: white; background: #bfc0c0; text-decoration: none;}
/* a:active {color: black; background: white;}
a:focus {color: black; background: rgb(160, 150, 140);}*/

div.header {background-color: #F3F3F0; padding: 10px; border-bottom: solid 1px  #709090; border-top: solid 1px #709090;}
div.main {padding: 0 20px;}
div.textbox {margin: 1rem 0 2rem 0; padding: 25px; background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.16);} /*für 1spaltige Lesetexte ohne Vokabular*/
div.footer {background-color: #F3F3F0; margin: 18px 0 0 0; padding: 10px 0 10px 20px; border-top: solid 1px #709090; border-bottom: solid 1px #709090;}

h3 {text-align: left; color: #807873; font-size: 2.5rem; font-family: Ubuntu; font-weight: 400; padding: 0.3em 0 0 0; margin: 1rem 0;}

p {text-align: left; font-family: Ubuntu; font-weight: 400; font-size: 1.5rem; line-height: 2rem; padding: 0; margin: 0;color: #ooo;}
p.o {text-align: left; font-family: Ubuntu; font-weight: 500; font-size: 1.5rem; line-height: 2rem; padding: 0; margin: 1rem 0 0 0; color: #807873;} /* nur bei about.html*/
p.header {text-align: left;color: #555;font-size: 1.3em;}
p.footer {font-size: 1rem; color: #555; text-align: left;}
p.r {text-align: right;}
.b {color: #807873; font-weight: 500; margin: 0 0 0.5rem 0;}
.u {padding-bottom: 0.8rem;}

table {margin: 0; padding: 0; border: 0px solid #333; background-color: #fff;} /*border-collapse: collapse; box-sizing: border-box; */
table td p {font-size: 1.5rem; line-height: 2rem; margin: 0;}
td, th {padding: 0 1.8rem 0 0; margin: 0; }

table.h3 {background-color: #FdFdFA; width: 100%; }  /* Seitentitel und Pfeiltasten */
table.h3 td, th {padding: 0 0 0 0.2em; margin: 0;} 

.titelblock {display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;padding-top: 1rem;}
.titelcontainer {margin-right: auto;}
.titelcontainer p {text-align: left; color: #807873; font-size: 2.5rem; font-family: Ubuntu; font-weight: 400; padding: 0.3em 0 0 0; margin: 1rem 0;}
.pfeilcontainer {display: flex; gap: 1rem;}
.pfeiltaste {width: 6rem; height: 3rem; background-color: #e0dad0; border-radius: 10px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; text-decoration: none; color: black;}
.pfeiltaste:hover {background-color: #c0bab0; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);}
.pfeiltaste img {width: 2.6rem; height: 1.4rem;}

table.m1 {margin: 1rem 0 2rem 0; padding: 20px; border: 1px solid #ccc;width: 100%; box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.16);}
table.m1 td:first-child {white-space: nowrap; width: 1%;}
table.m1 td:last-child {width: auto;}

/* 3spaltige Tabellen mit Rahmen und langer Zelle rechts */
table.m2 {margin: 1rem 0 2rem 0; padding: 20px; border: 1px solid #ccc;width: 100%; box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.16);}
table.m2 td:first-child {white-space: nowrap; width: 1%;}
table.m2 td:nth-child(2) {white-space: nowrap; width: 1%;}
table.m2 td:last-child {width: auto;}

/* 3spaltige Tabellen mit  langer Zelle rechts, aber ohne Rahmen */
table.r3 {;}
table.r3 td:first-child {white-space: nowrap; width: 1%;}
table.r3 td:nth-child(2) {white-space: nowrap; width: 1%;}
table.r3 td:last-child {width: auto;}


.si {width: 25px;height: 25px;} /*scaled-image*/
.s2 {width: 2em;height: 1em;vertical-align: middle;} 
.s3 {width: 30px;height: 30px;}
.s4 {width: 4.5em; height: 1.8em; vertical-align: middle; filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));}

/* Audio button */
.box {width: 6rem; height: 3rem; padding: 0 0px 0 0; margin: 0 20px 0 0; float: left; background-color: #e0dad0; border-radius: 10px;  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.box:hover {background-color: #c0bab0; border: 0px solid #e0dad0;}

/* gemittete Tasten,  12em breit, 20px Abstand, nur Titeleite */
.container12 {display: flex; justify-content: center;  align-items: center; gap: 20px;}
.box12 {width: 12rem; height: 3rem; background-color: #e0dad0; border-radius: 10px;  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer;  }
.box12:hover {background-color: #c0bab0; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); } 

/* tab Reiter */
.tab-container {display: flex; border-bottom: 0px solid #ccc; }
.tab {padding: 8px 12px; cursor: pointer; border: 0px solid #ccc; border-radius: 20px 0 0 0; background-color: #e0dad0; margin-right:4px;}
.tab:hover {background-color: #c0bab0; border: 0px solid #d0e0e0;}
.tab.active {background-color: #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
.content {border: 1px solid #ccc; padding: 1.5rem; margin: 0 0 2rem 0; background-color: #fff; box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.16);} 

/*Laufschrift-Ausgabe von demo.js */
#output {text-align: left; font-family: Ubuntu; font-weight: 400; font-size: 1.5rem; line-height: 2rem; padding: 0; margin: 0;color: #ooo; white-space: pre-wrap;}

/* Responsive Design */
@media (max-width: 768px)
{h3 {font-size: 2.5rem;}
p {font-size: 1.5rem; line-height: 2rem;}
table {font-size: 1.5rem;}}

@media (max-width: 480px)
{body {padding: 10px;}
h3 {font-size: 2.5rem;}
p {font-size: 1.5rem; line-height: 2rem;}
table {font-size: 1.5rem;}}