/*
CSS Credit: http://www.templatemo.com/
*/

/* 
Book Store Template 
http://www.templatemo.com/preview/templatemo_086_book_store 
*/
body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Verdana, Arial, san-serif;
	font-size: 11px;
	color: #ffffff;
	background: #4b4743;
}



blockquote {
  margin: 0 0 20px;
  padding: 20px; /* Einheitlicher Padding-Wert */
  padding-left: 60px; /* Zusätzlicher linker Abstand für das Icon */
  border-left: 4px solid gold; /* Goldener Rahmen */
  background-color: #333; /* Dunkler Hintergrund */
  color: gold; /* Goldener Text */
  font-style: italic;
  border-radius: 5px; /* Abgerundete Ecken */
  position: relative; /* Für die Platzierung des Icons */
}

blockquote::before {
  content: "\f10d"; /* Unicode für das Font Awesome Icon (Zitierzeichen) */
  font-family: "Font Awesome 5 Free"; /* Font Awesome Familie */
  font-weight: 900; /* Erforderlich für Solid Icons */
  color: gold; /* Farbe des Icons */
  font-size: 24px;
  position: absolute;
  top: 10px; /* Abstand vom oberen Rand */
  left: 15px; /* Abstand vom linken Rand */
}







a:link, a:visited { color: #e6e154; text-decoration: none; font-weight: bold;} 
a:active, a:hover { color: #e6e154; text-decoration: underline;}

p {
	margin: 0px;
	padding: 0px;
	letter-spacing: 1px;
	line-height: 2;
}

img {
	margin: 0px;
	padding: 0px;
	border: none;
	
}

div.desc {
    padding: 15px;
    text-align: center;
}

div#audio_player{ width:150px; height:60px; border-radius:4px;}
div#audio_controls{ margin-left:66px; }
div#audio_controls > button{ border:none; cursor:pointer; outline:none; display:block; float:left; margin:10px 10px 0px 0px; }
div#audio_controls > input{ outline:none; display:block; float:left; margin:24px 10px 0px 0px; }
button#playpausebtn{
	font-family: FontAwesome;
	content: "\f144\ ";
}
button#mutebtn{
	font-family: FontAwesome;
	content: "\f28b\ ";
	width:5px;
	height:14px;
}
input#seekslider{
	width:100px;
}
input#volumeslider{
	width: 70px;
}
div#timebox{
	margin: 23px 10px 0px 0px;
	float:left;
	width:80px;
	background:#000;
	border-bottom:#333 1px solid;
	text-align:center;
	color: #09F; 
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
}
input[type='range'] {
    -webkit-appearance: none !important;
	margin:0px;
	padding:0px;
    background: #000;
    height:13px;
	border-bottom:#333 1px solid;
}
input[type='range']::-ms-fill-lower  {
	background:#000;
}
input[type='range']::-ms-fill-upper  {
	background:#000;
}
input[type='range']::-moz-range-track {
	border:none;
    background: #000;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
input[type='range']::-moz-range-thumb {
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
input[type='range']::-ms-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}


.cleaner {
	clear: both;
	width: 100%;
	height: 1px;
	font-size: 1px;	
}

.cleaner_with_height {
	clear: both;
	width: 100%;
	height: 30px;
	font-size: 1px;	
}

.cleaner_with_width {
	float: left;
	width: 20px;
	height: 30px;
	font-size: 1px;	
}

.buy_now_button a{
	clear: both;
	text-align: center;
	display: block;
	width: 100px;
	padding: 4px 0 5px 0;
	margin-bottom: 10px; 
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
img
{
border-radius: 5px;
}
#Klappe
{
width: 920px;
border-color: #e6e154;
border-width: 2px;
padding: 10px;
border-style: dotted;
float: center;
}
#Star
{
margin: 1px;
padding: 0px;
}
#Klappe #Comment
{
border-radius: 15px;
background: #533614;
padding: 20px; 
margin-bottom: 10px; 
}

.detail_button a{
	clear: both;
	text-align: center;
	display: block;
	width: 100px;
	padding: 4px 0 5px 0;
	margin-bottom: 10px; 
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_container {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    background: #1c1c1b url(images/templatemo_bg.jpg) repeat-y;
}


/* menu */

#templatemo_menu {
	clear: both;
	width: 950px;
	height: 45px;
	background: url(images/templatemo_menu_bg.jpg) no-repeat;
}





#templatemo_menu ul {
    padding: 13px 0 0 0;
	margin: 0;
	list-style: none;
	display: inline;
}

#templatemo_menu li {
    float: left;
}

#templatemo_menu li a, .dropbtn {
    display: inline-block;
    color: #e6e154;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#templatemo_menu li a:hover, .dropdown:hover .dropbtn {
	text-decoration: underline;
	color: #e6e154;
}

#templatemo_menu li.dropdown {
    display: inline-block;
}

#templatemo_menu .dropdown-content {
    display: none;
    position: absolute;
    background: url(images/templatemo_menu_bg.jpg);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#templatemo_menu .dropdown-content a {
    color: #e6e154;
	padding: 13px 0 0 0;
	margin: 0;
	list-style: none;
    text-decoration: none;
    display: block;
    text-align: left 3em;
}

#templatemo_menu .dropdown-content a:hover 
{
text-decoration: underline;
color: #e6e154;
}

#templatemo_menu .dropdown:hover .dropdown-content {
    display: block;
}

/* end of menu*/

/* header */
#templatemo_header {
	clear: both;
	width: 950px;
	height: 285px;
	padding: 0;
	margin: 0;
}

#templatemo_header a,a:hover {
	color: #ffffff;
}

#templatemo_header #templatemo_special_offers {
	float: left;
	margin-top: 90px;
	margin-left: 490px;
	width: 180px;
}

#templatemo_special_offers a {
}

#templatemo_special_offers ul {
	 margin: 0 0 10px 0;
	 padding: 0 0 0 20px;
}

#templatemo_special_offers li {
	 margin: 0;
	 padding: 0; 
}

#templatemo_header #templatemo_new_books {
	float: left;
	margin-top: 90px;	
	margin-left: 55px;
	width: 180px;
}

#templatemo_new_books ul {
	 margin: 0 0 10px 0;
	 padding: 0 0 0 20px;
}

#templatemo_new_books li {
	 margin: 0;
	 padding: 0; 
}


/* end of header */


/* content */
#templatemo_content {
	clear: both;
	width: 960px;
	padding: 0 20px;
}

#templatemo_content #templatemo_content_left {
	float: left;
	width: 250px;
	padding: 10px;
	background-color: #171716;
	border: 1px solid #212120;
}

#templatemo_content .templatemo_content_right {
	float: right;
	width: 670px;
}
#templatemo_content .templatemo_content_right1 {

	width: 100%;
}

#templatemo_footer1 {
	clear: both;
	width: 950px;
	padding: 20px 0px 20px 0;
	text-align: center;
	border-top: 1px solid #25211e;
	color: #999;
	background-color: #111110;
	float: right;
	width: 100%;
}


.templatemo_content_right1 .templatemo_product_box {
	float: left;
	width: 650px;
	height: auto;
	padding: 10px;
	border: 1px solid #333;
}

.templatemo_content_right1 h1 {
	padding: 10px;
	margin: 0 0 20px 0;
	font-size: 20px;
	color: #cbc750;
	background: url(images/templatemo_h1_bg.jpg);
}

.templatemo_content_right1 h2 {
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
	font-size: 18px;
	color: #e6e154;
}

.templatemo_content_right1 h3 {
	padding: 0;
	margin: 0 0 20px 0;
	font-size: 18px;
	color: #85391f;
}


.custom-heading {
  padding: 10px;
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #cbc750;
  background: url(images/templatemo_h1_bg.jpg);
}

.templatemo_content_right1 ul {
	margin: 0 0 20px 0;
	padding: 0 0 0 20px;
	list-style: none;
}

.templatemo_content_right1 li {
	padding: 0 0 3px 0;
	font-size: 12px;
}

.templatemo_content_right1 .image_panel {
	float: left;
	width: 150px;
	margin-right: 20px;
}

.templatemo_content_right1 p {
	text-align: justify;
	padding: 0 0 8px 0;
	font-size: 15px;
}













#templatemo_content_left .templatemo_content_left_section{
	clear: both;
	padding-bottom: 10px;
	border-bottom: 1px solid #2b2b2a;
	margin-bottom: 20px;
}

.templatemo_content_left_section h1 {
	font-size: 14px;
	color: #cbc750;
	padding: 0 0 5px 0;
	margin: 0 0 10px 0;
	border-bottom: 1px dotted #cbc750;
}

.templatemo_content_left_section ul {
	padding: 0;
	margin: 0;
}

.templatemo_content_left_section ul li{
	padding: 0 0 3px 10px;	
	list-style: none;
}

.templatemo_content_left_section ul li a{
	font-weight: normal;
	text-decoration: none;
	color: #969547;
}

.templatemo_content_left_section li a:hover, .templatemo_content_left_section li .current{
	color: #fcf88e;
}





.templatemo_content_right .templatemo_product_box {
	float: left;
	width: 650px;
	height: auto;
	padding: 10px;
	border: 1px solid #333;
}

.templatemo_content_right h1 {
	padding: 10px;
	margin: 0 0 20px 0;
	font-size: 18px;
	color: #cbc750;
	background: url(images/templatemo_h1_bg.jpg);
}

.templatemo_content_right h2 {
	padding: 0 0 0 0;
	margin: 0 0 20px 0;
	font-size: 10px;
	color: #e6e154;
}

.templatemo_content_right h3 {
	padding: 0;
	margin: 0 0 20px 0;
	font-size: 18px;
	color: #85391f;
}

.templatemo_content_right ul {
	margin: 0 0 20px 0;
	padding: 0 0 0 20px;
	list-style: none;
}

.templatemo_content_right li {
	padding: 0 0 3px 0;
}

.templatemo_content_right .image_panel {
	float: left;
	width: 100px;
	margin-right: 20px;
}

.templatemo_content_right p {
	text-align: justify;
	padding: 0 0 8px 0;
	font-size: 15px;
}

.templatemo_product_box h1 span {
	font-weight: normal;
}

.templatemo_product_box img {
	float: left;
	margin-right: 20px;
}

.templatemo_product_box .product_info {
	float: left;
	width: 500px;
	height:auto;
}

.product_info p {
	margin-bottom: 15px;
}

/* end of content */

/* footer */
#templatemo_footer {
	clear: both;
	width: 950px;
	padding: 20px 0px 20px 0;
	text-align: center;
	border-top: 1px solid #25211e;
	color: #999;
	background-color: #111110;
}

#templatemo_footer a{
	color: #fff;
	font-weight: normal;
}

progress {
	width: 100%;
	height: 14px;
	margin: -20px auto;
	display: block;
	/* Important Thing */
	-webkit-appearance: none;
	border: none;
}

/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
	background: black;
	border-radius: 50px;
	padding: 2px;
	box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}

/* Now the value part */
progress::-webkit-progress-value {
	border-radius: 50px;
	box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
	background:
		-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
		-webkit-linear-gradient(top, rgba(230, 225, 84), rgba(0, 0, 0, 0.2)),
		-webkit-linear-gradient(left, #ba7448, #c4672d);
	
	/* Looks great, now animating it */
	background-size: 25px 14px, 100% 100%, 100% 100%;
	-webkit-animation: move 5s linear 0 infinite;
}

/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties  */

@-webkit-keyframes move {
	0% {background-position: 0px 0px, 0 0, 0 0}
	100% {background-position: -100px 0px, 0 0, 0 0}
}

div.gallery {
    border: 1px solid #e6e154;
}
div.gallery1 {
    
}

div.gallery:hover {
    border: 1px solid #e6e154;
}
div.gallery1:hover {
    border: 1px solid #e6e154;
}

div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery1 img {
	margin: 10px auto;
    width: 50;
    height: auto;
}
div.gallery2 img {
	margin: 10px auto;
    width: 50;
    height: auto;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 0px;
    float: left;
    width: 24.99999%;
}
.responsive2 {
    padding: 0 0px;
    float: left;
    width: 24.99999%;
}
.responsive1 {
    padding: 0 0px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background: #533614; /* Set a background color */
    color: #e6e154; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #111110; /* Add a dark-grey background on hover */
}



details summary{
    background: #533614;
    color: #969547;
	content: "-";
}

details[open] summary {
    color: #969547;
	content: "-";
}

/* Hide the default marker. */    
details summary::-webkit-details-marker {
    display: none;
}

/* Add the custom marker in the default state. */    
details summary:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "+";
	float: left
}
#cookiedingsbums a {color:#000; text-decoration:none;}

#cookiedingsbums a:hover {text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #533614; 
   background: -moz-linear-gradient(top, #533614 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#533614), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #533614 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #533614 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #533614 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #533614 0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#533614', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:30%; 
   font-size:12px; 
   line-height:16px;}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}

hr {
	border:solid #e6e154  0.5px;
	height:1px;
}


#bookshelf {
  position: relative;
  box-sizing: border-box;
  vertical-align: bottom;
  padding-bottom: 10px;
  display: table;
}
#bookshelf img {
  position: relative;
  display: inline-block;
  width: 150px;
  -moz-box-shadow: 0px 0px 5px 0px #000000;
-webkit-box-shadow: 0px 0px 5px 0px #000000;
-o-box-shadow: 0px 0px 5px 0px #000000;
box-shadow: 0px 0px 5px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=5);
}

#bookshelf a {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
  text-decoration: none;
}
#bookshelf a:after {
  content:"";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #772F1B;
}


#bookshelf1 {
  position: relative;
  box-sizing: border-box;
  vertical-align: bottom;
  padding-bottom: 10px;
  display: table;
}
#bookshelf1 img {
  position: relative;
  display: inline-block;
  width: 50px;
  -moz-box-shadow: 0px 0px 5px 0px #000000;
-webkit-box-shadow: 0px 0px 5px 0px #000000;
-o-box-shadow: 0px 0px 5px 0px #000000;
box-shadow: 0px 0px 5px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=5);
}

#bookshelf1 a {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
  text-decoration: none;
}
#bookshelf1 a:after {
  content:"";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #772F1B;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
  content: 'Mehr anzeigen';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Weniger anzeigen';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}
.read-more-state {
  display: none;
}

* {
    box-sizing: border-box;
}

/* Create three columns of equal width */
.columns {
    float: left;
    width: 50%;
    padding: 8px;
}
.columns2 {
    float: left;
    width: 100%;
    padding: 8px;
}

/* Style the list */
.price {
    list-style-type: none;
    border: 1.5px dotted #e6e154;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
    background-color: #111;
    color: white;
    font-size: 20px;
}

/* List items */
.price li {
    border-bottom: 1px dotted #e6e154;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.price .grey {
    background-color: #1C1C1C;
    font-size: 20px;
}

/* The "Sign Up" button */
.button {
    background-color: #533614;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}





#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
   However, delay the fade out process for 2.5 seconds */
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

.checked {
    color: orange;
}



/* Stile für Bildschirme ab 1025 Pixeln Breite (Desktop) */
@media (max-width: 600px) 
{
    /* Beispielanpassung für Desktop */
    body {
        font-size: 18px;
    }

    #templatemo_container {
        width: 70%;
    }
}

#blog ul {
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
  list-style-type: disc !important;
}


#blog ol {
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
  list-style-type: decimal !important;
}

/* Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

  .spoiler {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    max-width: 100%; /* oder eine andere Breite nach Bedarf */
    cursor: pointer;
  }

  .spoiler-title {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .spoiler-toggle {
    font-size: 20px;
    margin-right: 5px;
  }

  .spoiler-content {
    display: none;
  }

  .spoiler.active .spoiler-content {
    display: block; /* Anzeige des Inhalts, wenn die 'active' Klasse vorhanden ist */
  }


@media only screen and (max-width: 700px) {
  #templatemo_container,
  #templatemo_content,
  .templatemo_content_right1,
  .post-body,
  body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  h1, h2, h3, p, li {
    font-size: 16px !important;
    word-wrap: break-word;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media only screen and (max-width: 700px) {
  #Klappe {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  html { font-size: 18px; }              /* alles minimal größer auf Mobile */
  body { padding: 0 1rem; }

  /* Layout-Container enger stapeln */
  #templatemo_container,
  #templatemo_content,
  .templatemo_content_right1,
  .templatemo_product_box {
    width: 100%;
    float: none;
  }

  /* Cookie-Bar: Buttons groß & klickbar */
  #cookiedingsbums { font-size: 1rem; }
  #cookiedingsbumsCloser { font-size: 1.2rem; padding: .4rem .6rem; }

  /* Listen & Meta-Infos */
  ul { padding-left: 1.2rem; }
  .image_panel { float: none; margin: 0 0 1rem; }

  /* Lesebalken/Badges */
  span.right { font-size: .9rem; padding: .3rem .6rem; }
}




/* NAVIGATION – starke Selektoren, damit Template nichts überschreibt */
#templatemo_menu ul#navigation {
  display: flex !important;
  align-items: center;
  gap: 18px;                 /* Abstand zwischen den Links */
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  white-space: nowrap;       /* kein Zeilenumbruch */
}

#templatemo_menu ul#navigation li { margin: 0; padding: 0; }

#templatemo_menu ul#navigation a {
  display: inline-block;
  padding: 6px 10px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, transform .08s;
}

#templatemo_menu ul#navigation a:hover,
#templatemo_menu ul#navigation a:focus {
  color: #fff;
  border-color: #e6e154;     /* gelber Unterstrich */
  transform: translateY(-1px);
}

/* optional: aktiven Punkt hervorheben, wenn du eine Klasse setzt */
#templatemo_menu ul#navigation a.is-current { border-color: #e6e154; }

/* Bei sehr kleinen Screens darf sie umbrechen (optional) */
@media (max-width: 720px){
  #templatemo_menu ul#navigation { flex-wrap: wrap; row-gap: 10px; }
}

/* FILTER-CONTAINER */
.post-filter {
  padding: 8px 12px;
  position: relative;
}

/* Skaliert als Ganzes, daher inline-flex */
.post-filter .filter-chips{
  display: inline-flex;           /* eine Zeile */
  flex-wrap: nowrap;
  gap: 10px;
  transform-origin: left center;  /* für die Skalierung wichtig */
  will-change: transform;
}

/* Buttons bleiben Buttons – gern übernehmen wir deine bisherigen Styles.
   Nur minimal „kompressibler“ machen: */
.post-filter .filter-chips button{
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid #3a3a38;
  background: #222;
  color: #e6e154;
  cursor: pointer;
  white-space: nowrap; /* nie umbrechen */
}

.post-filter .filter-chips button.is-active{
  background: rgba(230,225,84,.22);
  border-color: #e6e154;
  box-shadow: 0 0 0 2px rgba(230,225,84,.15) inset;
}

.post-filter{ padding:8px 12px; }
.chips-row{ position:relative; height:auto; min-height:46px; } /* Höhe der Chipzeile */
.filter-hint{ margin-top:10px; font-weight:700; }              /* kein Überlappen mehr */

/* Menürahmen im Header-Look */
#templatemo_menu{
  position: relative;
  margin: 6px auto 14px;
  padding: 8px 12px;
  background: linear-gradient(180deg,#6b471b 0%,#4a3213 100%);
  border: 2px solid #c4943a;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 18px rgba(0,0,0,.35);
}

/* Deko-Schrauben */
#templatemo_menu::before,
#templatemo_menu::after{
  content:"";
  position:absolute; top:6px;
  width:10px; height:10px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,#fff 0 18%,#ead08b 19% 60%,#7a5a23 61% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
#templatemo_menu::before{ left:10px; }
#templatemo_menu::after { right:10px; }

/* Navigation: eine Zeile, Abstand etc. */
#templatemo_menu ul#navigation{
  display:flex !important;
  align-items:center;
  gap:14px;
  list-style:none;
  margin:0; padding:0;
  white-space:nowrap;
}

/* Links optisch passend zum Rahmen */
#templatemo_menu ul#navigation a{
  display:inline-block;
  padding:8px 12px;
  border:1px solid rgba(255,224,120,.35);
  border-radius:10px;
  background: rgba(0,0,0,.12);
  color:#f5f5f5;
  text-decoration:none;
  font-weight:800;
  line-height:1;
  transition:color .12s, border-color .12s, background .12s, transform .08s;
}

#templatemo_menu ul#navigation a:hover,
#templatemo_menu ul#navigation a:focus{
  color:#fff;
  border-color:#e6e154;
  background:rgba(230,225,84,.16);
  transform:translateY(-1px);
}

/* aktueller Link (wenn du serverseitig .is-current setzt) */
#templatemo_menu ul#navigation a.is-current{
  border-color:#e6e154;
  background:rgba(230,225,84,.2);
}

@media (max-width: 720px){
  #templatemo_menu ul#navigation{ flex-wrap:wrap; row-gap:8px; }
}


:root{
  --wood-1:#5e3b18; --wood-2:#74471e; --wood-3:#906027;
  --felt:#14352e; --felt-edge:#0f2924;
  --chalk:#f2f2f2; --chalk-dim:#d6d6d6;
  --accent:#e6e154;
}
.theme-xmas      { --accent:#e6e154; --felt:#0f372e; }
.theme-silvester { --accent:#ffd86b; --felt:#0d2c3a; }
.theme-halloween { --accent:#ff9b3d; --felt:#13241f; }
.theme-valentin  { --accent:#ff8fb1; --felt:#173231; }
.theme-blogday   { --accent:#9ad0ff; --felt:#13342d; }

/* Header-Wrapper: weniger Top-Abstand */
.chalkboard-header{ position:relative; padding:14px 10px 46px; background:linear-gradient(#2a2a29,#222); }
.chalkboard-header .shelf{
  position:absolute; left:22px; right:22px; bottom:12px; height:24px;
  background:
    linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%),
    linear-gradient(90deg, var(--wood-1), var(--wood-2) 40%, var(--wood-3) 75%, var(--wood-2));
  box-shadow:0 8px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:6px;
}
.board{
  max-width:980px; margin:0 auto; border-radius:14px; padding:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.06)) padding-box,
              linear-gradient(90deg, #b9853d,#d1a75f 50%,#b9853d) border-box;
  border:9px solid transparent; box-shadow:0 12px 24px rgba(0,0,0,.45); position:relative;
}
.board::before,.board::after{
  content:""; position:absolute; top:-7px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff 0 20%, #d0b47a 20% 60%, #7e6b3f 60%);
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.board::before{ left:18px; } .board::after{ right:18px; }

.board-inner{
  border-radius:9px; padding:14px 16px 16px; color:var(--chalk);
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 360px at 80% 30%, rgba(255,255,255,.05), transparent 60%),
    repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.08) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--felt), var(--felt-edge));
  box-shadow: inset 0 0 100px rgba(0,0,0,.6), inset 0 0 10px rgba(0,0,0,.55);
  display:grid; grid-template-columns:160px 1fr 14px 1fr; gap:10px 16px; align-items:start;
}

/* Logo links */
.logo-col{ grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; }
.logo-img{ width:130px; height:auto; display:block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); opacity:.98; }

/* Überschriften */
.board-inner h2{ margin:0 0 6px; font:900 19px/1.2 system-ui,sans-serif; color:var(--accent); letter-spacing:.2px; }
.board-inner h2:first-of-type{ grid-column:2; } .board-inner h2:last-of-type{ grid-column:4; }
.divider{ grid-column:3; grid-row:1 / span 2; width:2px; background:var(--chalk); opacity:.85; }

/* Klickbare Listen */
/* weniger Top-Abstand */
.chalkboard-header{ position:relative; padding:6px 10px 40px; }

/* Board-Inhalt darf nichts „auslaufen“ lassen */
.board-inner{ overflow: hidden; }

/* Klickbare Listen – neu als 3-Spalten-Grid */
.list{
  list-style:none; margin:0; padding:0;
  font-size:15px; color:var(--chalk-dim);
  overflow:hidden;                 /* Sicherheitsnetz */
}
.list li{ margin:4px 0; }
.list a{
  display:grid;
  grid-template-columns: 12px 1fr auto; /* Punkt · Titel · Datum */
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  max-width:100%;
  box-sizing:border-box;
  outline:none;
}
.list a:hover{ background:rgba(255,255,255,.06); color:var(--accent); }
.list a:focus-visible{ box-shadow:0 0 0 3px rgba(230,225,84,.35); }

/* Punkt (kein absolute mehr) */
.list a .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 4px rgba(255,255,255,.25);
}

/* Titel muss schrumpfen dürfen */
.list a .txt{
  min-width:0;                   /* wichtig, sonst drückt er das Datum raus */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Datum fix rechts, aber IM Link */
.list a .date{
  white-space:nowrap;
  font-size:12px;
  opacity:.75;
  margin-left:6px;
}


/* „Mehr…“ */
.more-row{ margin-top:6px; }
.more-row a{ color:var(--accent); text-decoration:none; font-weight:800; font-size:13px; }
.more-row a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:900px){
  .board-inner{ grid-template-columns:120px 1fr; grid-template-rows:auto auto auto 1fr; }
  .logo-col{ grid-column:1; grid-row:1 / span 4; }
  .divider{ display:none; }
  .board-inner h2:first-of-type{ grid-column:2; grid-row:1; }
  .board-inner h2:last-of-type{ grid-column:2; grid-row:2; }
  .list.left{ grid-column:2; grid-row:3; }
  .list.right{ grid-column:2; grid-row:4; }
  .logo-img{ width:110px; }
}
@media (max-width:560px){
  .board-inner{ grid-template-columns:1fr; grid-template-rows:auto auto auto auto; }
  .logo-col{ grid-column:1; grid-row:auto; justify-content:flex-start; }
  .logo-img{ width:96px; }
}