@charset "UTF-8";
/*
  Flavor name: Default (mini-default)
  Author: Angelos Chalaris (chalarangelo@gmail.com)
  Maintainers: Angelos Chalaris
  mini.css version: v3.0.1
*/

:root {
  --universal-border-radius: 0.525rem;
}

/*
Sehr, sehr wichtig fuer alle Webprojekte
1) alle elemente brauchen box-sizing: border-box;  für ALLE elemente: Vorteil: border und padding liegen dann innerhalb(!) der width
2) img braucht display:block;   Entfernt bei allen img die 3 Zeilen unterhalb!!
*/
img {
	display:block;
}

* {
    font-size: 1.05rem;
}
html, * {
  line-height: 1.7;
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 14px 16px 8px 16px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7;
	}
  .hamburger.is-active:hover {
    opacity: 1; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #0277bd; }

.hamburger-box {
  width: 28px;
  height: 18px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 28px;
    height: 3px;
    background-color: #4c8ed2;
    background-color: #2a86d4;
    background-color: #0277bd;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }




/* Buttons */
button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[role="button"], label[role="button"], [role="button"] {
  transition: background 0s;
}

button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
  --button-back-color: #d32f2f;
  --button-fore-color: #f8f8f8;
}

button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
  --button-hover-back-color: #c62828;
}

table{
  margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
  -webkit-touch-callout: none      /* disables the callout */   
}

.topheartimg {
	min-width:15px;
}

div#topheartdiv {
	width:25px;
	height:25px;
	background-image:url(../images/heart-outline.svg);	
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#topheartdiv:hover {
	background-image:url(../images/heart.svg);	
}
div#topheartdiv.active {
	background-image:url(../images/heart.svg);	
}
div#topheartdiv.active:hover {
	opacity:0.8;	
}

.heart {
	opacity:0.8;
	height:17px;
	width:17px;
	margin-left:8px;
	cursor:pointer;
	background-image:url(../images/heart-outline.svg);
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/* Mouse Hover abschalten fuer Touchscreens */
@media (hover: hover) {
	.heart:hover {
		background-image:url(../images/heart.svg);
		opacity:0.7;
	}
}
.heart.active {
	background-image:url(../images/heart.svg);
	opacity:1;
}
.heart.active:hover {
	opacity:1;
}
.heart.trash {
	width:17px;
	background-image:url(../images/trash.svg);
	opacity:0.6;
}
.heart.trash:hover {
	opacity:1;
}
.heart.ticker {
	background-image:url(../images/heart.svg);
}
.heart.copyclip {
	background-image:url(../images/copy5.svg);
	width:18px;
	height:18px;
}
.heart.copyclip:hover {
	opacity:1;
}

#navtoggle,.topheart {
	background-color:#fff7d9;
	border-bottom:1px solid #e9dab7;
}

#navtoggle {
	border-left:1px solid #fff7d9;
}

nav a.active {
    text-decoration: none;
    background: var(--nav-hover-back-color);
    background: #1388ce;
    background: #2a86d4;
	color: white;
}

.topheart img{
	opacity:0.8;
	height:100%;
	margin:0 5px 0 0;
}
.topheart img:hover {
	opacity:1;
}
.topheart img.active {
	opacity:1;
}
.topheart img.active:hover {
	opacity:1;
}

.pic {
	height:18px;
	width:18px;
	margin-left:3px;
	background-image:url(../images/media.png);
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display:block;
}

.pic.headphone {
	background-image:url(../images/media-headphone.png);
}

.heartoff {
	opacity:0.5;
	height:17px;
	margin-left:6px;
	cursor:pointer;
}

.heartoff:hover {
	opacity:1;
}

.heartoff.active {
	opacity:1;
}

.b {
	font-weight:bold;
}


ul {
	order: 1px solid #f6f3cd;
	border-radius: 10px;
	ackground-color: #FFF8DC;
	list-style-type: none;
	padding: 10px;
	width:auto;
	display:inline-block;
	-webkit-user-select: none !important;  /* Chrome all / Safari all */
	-moz-user-select: none !important;     /* Firefox all */
	-ms-user-select: none !important;      /* IE 10+ */
	user-select: none !important;          /* Likely future */    
	-webkit-touch-callout: none !important;     /* disables the callout */
}

li {
	line-height:2;
	white-space: nowrap;
}

ul.categories {
	padding: 0px 5px;
}

ul.categories li, div.categories nobr, div.categories a {
	font-size:1.05em;
}

div.categories {
	padding: 10px;	
}

.featuredwrapper {
	border: 1px solid #f6f3cd;
	border-radius: 10px;
	background-color: #FFF8DC;
	padding: 10px 10px 10px 5px;
	display:inline-block;
}

table.featured tr td {
	white-space: nowrap;
	padding:1px 3px;
}

table.featured tr td div{
	display:inline-block;
}

table.featured tr td a {
	margin-right: 3px;
}


table.wifilist {
	border-collapse: collapse;
	border:none;
	min-width:310px;
}

table.wifilist tr {
	border-bottom:1px solid #dddddd;
}

table.wifilist tr th {
	text-align: left;
	padding:3px;
	background-color:#d9edf7;
	offbackground-color:#c3e1f9;
	font-weight:normal;
	font-size:1.25rem;
}

table.wifilist tr th.cntr {
	text-align: center;
}


table.wifilist tr th .redheart {
	height:17px;
	width:17px;
	background-image:url(../images/heart.svg);
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: inline-block;
	opacity:0.75;
	margin:4px 4px 0 2px;
}

table.wifilist tr.gry {
	background-color:#f6f6f6;
}

@media (hover: hover) {
	table.wifilist tr:hover {
		background-color:#f0f0f0;
	}
	table.wifilist tr td.heartcell:hover {
		ackground-color:#fff6f6;
	}


}

table.wifilist tr td {
	white-space: nowrap;
	padding:6px 3px;
}

table.wifilist tr th.one  {
	color:#666;
	width:30px;
}

table.wifilist tr td.one  {
	color:#aaa;
}

table.wifilist tr td div{
	display:inline-block;
}

table.wifilist tr td a {
	margin-right: 3px;
}
table.wifilist .heart {
	margin:3px 2px 0 0;
}

.pointr:hover {
	cursor:default;
}

.wifinames {
	padding-top:15px;
	padding-bottom:15px;
}

.wifinames li {
	display:flex;
	align-items: center;
	white-space: nowrap;
}

.wifinames li a {
	margin-left:10px;
	margin-right:3px;
}


/* Rounded Button Info Box */
.myinfobox {
  background-color: #fff5ca;
  border: 1px solid #ffea89;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 22px;
  border-radius: 12px;
}

/* Gestaltung der Bluray */
.generatortext {
	font-size:30px;
	color:#fff;
	margin:17px 20px 22px 20px;
	border-radius:5px;
}

@media screen and (min-width: 480px) {
	.generatortext {
		font-size:37px;
	}
}

@media screen and (min-width: 768px) {
	.generatortext {
		font-size:50px;
		margin:47px 50px 27px 50px;
	}
}

@media screen and (min-width: 1280px) {
	.generatortext {
		font-size:65px;
	}
}

/* Design of Responsive Header */
header {
	box-sizing: border-box;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	background-color:#fff7d9; /* fff7e5; */
	opacity:0.8;
	height:44px;
}


/*
.topnav {
	display:flex;
	flex-wrap:nowrap;
	background-color:#FFFFCC;
	align-items:stretch;
	margin:0;
	padding:0;
}

.topnav a {
	color:#fff;
	background-color:#333;
	border:1px solid red;
	font-size:1.3rem;
	height:44px;
	padding:0 15px;
	margin:0;
	text-decoration:none;
}
.topnav a:hover {
	background-color:#000;
}

.topnav a.active {
	background-color:#fff;
	color:#000;
}
*/

/* Add a black background color to the top navigation */
.topnav {
  ackground-color: #333;
  overflow: hidden;
  display:flex;
 }

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  olor: #f2f2f2;
  text-align: center;
  padding: 9px 8px;
  text-decoration: none;
  font-size: 17px;
  font-weight:500;
  border-bottom:1px solid #e9dab7;;
}

/* Change the color of links on hover */
.topnav a:hover {
  ackground-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #fff;
  color: black;
  border:1px solid #e9dab7;
  border-bottom:1px solid #fff;
  border-top:0px;
}

nav {
  border-top: 0;
  border-color: #e9dab7;
}

#navmobile {
	position:fixed;
	width:240px;
	height:calc(100vh - 46px);
	top:36px;
	right:-265px;
	background-color:#fff;
	z-index:2000;
	border-left-width:2px;
}

body {
	background-color:#f4f4f4;
}

.logo {
	margin:2px 0 0 2px;
}

/* Hamburger-Werte ueberschreiben */
.hamburger {
  padding: 13px 14px 8px 10px;
}
.hamburger-box {
    width: 28px;
    height: 18px;
}



/* Responsive */
@media screen and (min-width: 480px) {
	header {
		height:44px;
	}
	.topnav a {
	  padding: 9px 8px;
	}
	.logo {
		margin:2px 0 0 2px;
	}
}

@media screen and (min-width: 768px) {
	header {
		height:55px;
	}
	.topnav a {
	  padding: 12px 12px;
	}
	.logo {
		margin:2px 0 0 2px;
	}
	/* Hamburger-Werte ueberschreiben */
	.hamburger {
	  padding: 18px 14px 8px 10px;
	}
	.hamburger-box {
		width: 28px;
		height: 18px;
	}
	#navmobile {
		height:calc(100vh - 57px);
		top:47px;
	}
	div#topheartdiv {
		width:29px;
		height:29px;
	}
}

@media screen and (min-width: 1280px) {
	header {
		height:55px;
	}
	.topnav a {
	  padding: 12px 22px;
	}
	.logo {
		margin:2px 0 0 2px;
	}
}

/* Display Helper */
@media screen and (max-width: 1100px) {
	.hidden-under-1100 {
		display:none;
	}
}
@media screen and (max-width: 1000px) {
	.hidden-under-1000 {
		display:none;
	}
}
@media screen and (max-width: 900px) {
	.hidden-under-900 {
		display:none;
	}
}
@media screen and (max-width: 800px) {
	.hidden-under-800 {
		display:none;
	}
}
@media screen and (max-width: 700px) {
	.hidden-under-700 {
		display:none;
	}
}
@media screen and (max-width: 600px) {
	.hidden-under-600 {
		display:none;
	}
}
@media screen and (max-width: 500px) {
	.hidden-under-500 {
		display:none;
	}
}
@media screen and (max-width: 400px) {
	.hidden-under-400 {
		display:none;
	}
}



/* Tabelle unter Detailseite */
table.detail {
  margin: var(--universal-margin);
}
table.detail tr, table.detail tr td, table.detail tr td a {
  line-height:1.4;
}
table.detail tr td.cntr {
	text-align:center;
}

.cntr {
	text-align:center;
}

h1,h2,h3 {
	font-family:'PT Sans',Verdana,Arial,sans-serif;
	font-weight:bold;
}

/* Grosser Button auf der Detailseite */
.bigbutton {
	display:inline-flex;
	align-items:center;
	border:1px solid #bbb;
	order:2px solid #d9edf7;
	order-color:#FF9900;
	border-width:0px 1px 1px 0px;
	width:auto;
	padding:2px 10px 2px 9px;
	ackground-color:#fcf8c0;
	ackground-color:#f1f8fb;
	ackground-color:#fdfdfd;
	background:#ebf8ff;
	border-radius:25px;
	white-space: nowrap;
}

.bigbutton.generator {
	font-size:18px;
	font-family:Arial;
	ackground:#ECF5FF;
	background:#ebf8ff;
}

.bigbutton h1 {
	font-size:18px;
	font-family:Arial;
}

.bigwifisymbol {
	height:18px;
	width:auto;
	margin:0px 0px 0px 2px;
}

a.generatorbutton {
	display:inline-block;
	margin:10px 0;
	padding:10px 30px;
	background-color:green;
	color:#ffffff;
	border-radius:20px;
	text-decoration:none;
	font-weight:600;
}

a.generatorbutton:hover {
	background-color:#009b00;
	cursor: pointer;
}

@media screen and (min-width: 480px) {
	.bigbutton {
		padding:2px 12px 2px 12px;
	}
	.bigwifisymbol {
		height:19px;
		margin:0px 0px 5px 6px;
	}
	.bigbutton h1 {
		font-size:22px;
	}
}

@media screen and (min-width: 768px) {
	.bigbutton {
		padding:10px 45px 10px 40px;
		border-radius:45px;
	}
	.bigwifisymbol {
		height:25px;
		margin:4px 10px 4px 5px;
	}
	.bigbutton h1 {
		font-size:30px;
	}
}

@media screen and (min-width: 1280px) {
	.bigbutton {
		padding:10px 45px 10px 40px;
	}
	.bigbutton h1 {
		font-size:30px;
	}
}

#videocontainer {
    background-color: black;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
	margin:5px;
	border-radius:6px;
}	
.videoextern {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius:6px;
}

a.adminbutton {
    display: inline-block;
    width: auto;
    height: auto;
    background:#EAFFE6;
    ackground:#00ff00;
    padding: 1px 15px 1px 12px;
    text-align: center;
    border-radius: 15px;
	order: 1px solid green;
	margin:0 0 8px 8px;
	font-style:italic;
	border:1px solid #c5efbd;
	text-decoration:none;
}

@media (hover: hover) {
	a.adminbutton:hover {
		text-decoration:none;
		background-color:#ddffd7;
	}
}

.whitebutton {
	display: inline-block;
	padding: 2px 6px 1px 6px;
	margin: 0 1px 3px 0;
	text-align: center;
	border-radius: 15px;
	line-height:1.4;
	border: 1px solid #0277bd;
	font-weight: bold;
	width:15px;
	text-decoration:none !important;	
}

@media screen and (min-width: 768px) {
	.whitebutton {
		padding: 3px 7px 3px 7px;
		margin: 0 2px 4px 0;		
	}
}

.whitebutton:hover, .whitebuttonactive {
	background-color:#0277bd;
	color:#fff !important;
	text-decoration:none;
}


*:fullscreen,
:-ms-fullscreen {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:-webkit-full-screen {
	background: black;
}

:-moz-full-screen {
	background: black;
}

:-ms-fullscreen {
	background: black;
	witdh: 90%;
	margin: 1em auto;
	object-fit: contain;
}

figure{
	display:inline-block;
}

figure img{
	cursor:pointer;
}

figcaption{
    margin-left:10px;
	margin:-5px 0 0 10px;
}

figure:-webkit-full-screen {
	width: 100%;
	text-align: center;
}

figure:-moz-full-screen {
	width: 100%;
	text-align: center;
}

figure:-ms-fullscreen {
	width: 100%;
	text-align: center;
}

figure:fullscreen { /* official selector */
	width: 100%;
	text-align: center;
}

figure:-webkit-full-screen img{
	width: auto;
	height: 90vh !important;
}

figure:-moz-full-screen img{
	width: auto;
	height: 90vh !important;
}

figure:-ms-fullscreen img{
	width: auto;
	height: 90vh !important;
}

figure:fullscreen img{ /* official selector */
	width: auto;
	height: 90vh !important;
}

audio {
	margin: 10px 10px 0 0;
	width: 100%; 
	max-width:500px;
	box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4);
	border-radius: 90px;
	text-decoration:none !important;
	color:white !important;
	text-decoration-color:white !important;
	border:3px solid #037a00;
}

.smallbutton {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 1px 15px 1px 12px;
    text-align: center;
    border-radius: 15px;
	border:1px solid #2a86d4;
	margin:0 0 8px 8px;
	font-color:#fff;
}

.smallbutton.active, .smallbutton:hover {
    background:#2a86d4;
	color:white;
	text-decoration:none;
}

.topnav {
	
}

table.bordered,table.bordered th,table.bordered tr,table.bordered td {
	border:1px solid #666;
}
table.bordered th {
	background-color:#CCCCCC;
}
table.bordered th,table.bordered td {
	padding:5px 10px;
}