Automated translation of german into "Leichte Sprache"
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

292 lines
5.6 KiB

2 months ago
  1. @font-face {
  2. font-family: 'Ubuntu-R';
  3. src: url('/assets/Ubuntu-R.ttf');
  4. font-weight: normal;
  5. font-style: normal;
  6. }
  7. .hidden {
  8. display: none !important;
  9. }
  10. * {
  11. font-family: Ubuntu,"Ubuntu-R",sans-serif;
  12. }
  13. a {
  14. text-decoration: none;
  15. /*color: #2359fb;*/
  16. }
  17. .flex {
  18. display: flex;
  19. flex-wrap: wrap;
  20. justify-content: center;
  21. }
  22. .fullheight {
  23. min-height: 100vh;
  24. }
  25. .fullheight-nav {
  26. min-height: calc(100vh - 50px);
  27. }
  28. .fullwidth {
  29. width: 100%;
  30. text-align: center;
  31. }
  32. .title {
  33. color: black;
  34. /*text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);*/
  35. }
  36. h1 {
  37. font-size: 4vw;
  38. }
  39. h2 {
  40. font-size: 2.25vw;
  41. }
  42. h3 {
  43. font-size: 17pt bold;
  44. text-align: left;
  45. }
  46. p {
  47. font-size: 15pt medium;
  48. /*line-height: 1.6;*/
  49. text-align: left;
  50. }
  51. .beta-tag {
  52. background: #ff00ff;
  53. color: white;
  54. border-radius: 5px;
  55. font-size: 0.9rem;
  56. padding: 0.3rem;
  57. margin-left: 0.5rem;
  58. }
  59. .beta-banner a {
  60. color: #ff00ff;
  61. }
  62. .beta-banner {
  63. background: repeating-linear-gradient( 45deg, #ff00ff, #ff00ff 10px, #c44c05 10px, #c44c05 20px );
  64. color: white;
  65. padding: 1rem;
  66. text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  67. }
  68. .logo {
  69. width: 10vw;
  70. margin-right: 2vw;
  71. }
  72. .page-heading {
  73. background-image: url("/assets/index-background.png"); /*, linear-gradient(0deg, #1f58c6 0%, #1c66f2 100%);*/
  74. background-position: 50% 50%;
  75. background-repeat: no-repeat;
  76. background-size: cover;
  77. background-attachment: fixed;
  78. }
  79. .page-heading-text {
  80. width: auto;
  81. margin: auto;
  82. padding: 1rem;
  83. }
  84. .page-heading > p {
  85. color: black;
  86. }
  87. .page-heading > p > a {
  88. color: #000000;
  89. }
  90. .page-heading.error {
  91. background: url("/assets/index-background.png"); /*, linear-gradient(0deg, #790000 0%, #a40000 100%)*/
  92. }
  93. .ncstyle-button.error {
  94. background: #ee4040;
  95. }
  96. .error.ncstyle-button:hover {
  97. background: #c82323;
  98. }
  99. .navbar {
  100. height: 50px;
  101. }
  102. body, html {
  103. margin: 0;
  104. padding: 0;
  105. }
  106. .ncstyle-button {
  107. background-color: #ffcc00;
  108. box-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  109. border-radius: 1vw;
  110. text-decoration: none;
  111. text-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  112. white-space: nowrap;
  113. height: 48px;
  114. width: auto;
  115. line-height: 2.25rem;
  116. padding: 0.5em;
  117. background: #ffcc00;
  118. font-size: 20pt;
  119. min-width: 18vw;
  120. display: block;
  121. transition: all .25s ease-in-out;
  122. color: white;
  123. }
  124. .margin-bottom {
  125. margin-bottom: 1rem;
  126. }
  127. .ncstyle-button_blue:hover {
  128. background: #fbc617;
  129. }
  130. .ncstyle-button_yellow:hover {
  131. background: #fbc617;
  132. }
  133. .ncstyle-input {
  134. margin: auto;
  135. padding: 7px 6px;
  136. font-size: 16px;
  137. background-color: white;
  138. color: #454545;
  139. border: 1px solid #dbdbdb;
  140. outline: none;
  141. border-radius: 3px;
  142. cursor: text;
  143. width: 80vw;
  144. }
  145. .click {
  146. cursor: pointer;
  147. }
  148. #script-copy {
  149. display: none;
  150. }
  151. @media only screen and (max-width: 1080px) {
  152. h1 {
  153. font-size: 48px;
  154. }
  155. h2 {
  156. font-size: 32px;
  157. }
  158. h3 {
  159. font-size: 24px;
  160. }
  161. p {
  162. font-size: 16px;
  163. }
  164. .title {
  165. text-align: center;
  166. }
  167. .logo {
  168. width: 20vw;
  169. margin: 0;
  170. }
  171. .ncstyle-button_blue {
  172. font-size: 24px;
  173. }
  174. }
  175. @media only screen and (max-width: 1080px), screen and (max-height: 600px) {
  176. .scroll-down-arrow {
  177. display: none;
  178. }
  179. }
  180. .scroll-down-arrow {
  181. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  182. background-size: contain;
  183. background-repeat: no-repeat;
  184. }
  185. .scroll-down-link {
  186. cursor:pointer;
  187. height: 60px;
  188. width: 80px;
  189. margin: 0px 0 0 -40px;
  190. line-height: 60px;
  191. position: absolute;
  192. left: 50%;
  193. bottom: 10px;
  194. color: #FFF;
  195. text-align: center;
  196. font-size: 70px;
  197. z-index: 100;
  198. text-decoration: none;
  199. text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  200. animation: fade_move_down 2s ease-in-out infinite;
  201. }
  202. /*animated scroll arrow animation*/
  203. @keyframes fade_move_down {
  204. 0% { transform:translate(0,-20px); opacity: 0; }
  205. 50% { opacity: 1; }
  206. 100% { transform:translate(0,20px); opacity: 0; }
  207. }
  208. .lds-ring {
  209. display: inline-block;
  210. position: relative;
  211. width: 80px;
  212. height: 80px;
  213. }
  214. .lds-ring div {
  215. box-sizing: border-box;
  216. display: block;
  217. position: absolute;
  218. width: 64px;
  219. height: 64px;
  220. margin: 8px;
  221. border: 8px solid #fff;
  222. border-radius: 50%;
  223. animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  224. border-color: #fff transparent transparent transparent;
  225. }
  226. .lds-ring div:nth-child(1) {
  227. animation-delay: -0.45s;
  228. }
  229. .lds-ring div:nth-child(2) {
  230. animation-delay: -0.3s;
  231. }
  232. .lds-ring div:nth-child(3) {
  233. animation-delay: -0.15s;
  234. }
  235. @keyframes lds-ring {
  236. 0% {
  237. transform: rotate(0deg);
  238. }
  239. 100% {
  240. transform: rotate(360deg);
  241. }
  242. }