@charset "utf-8";
@import "/_css/hamburger.css";
@import "/_css/header.css";
@import "/_css/input-text.css";
@import "/_css/submitbutton.css";
/************************ toggle ************************/

:root {
 --schriftart: Verdana;
 --farbehell1: color-mix(in srgb, var(--farbemittel) 1%, white); /****** sehr hell ********/
 --farbehell2: color-mix(in srgb, var(--farbemittel) 45%, white);/******  hell ********/
 --farbehell3: color-mix(in srgb, var(--farbemittel) 25%, white);/******  hell ********/
 --farbemittel: #be8d4b; /* Grundfarbe immer als #xxxxxx Wert */
 --farbedunkel1: color-mix(in srgb, var(--farbemittel) 75%, black);/****** dunkel ********/
 --farbedunkel2: color-mix(in srgb, var(--farbemittel) 55%, black);/****** sehr dunkel ********/
 --komplementaerfarbe: #c103b7;
 --contentbreite: 768px;
 --mehrereboxen: calc(var(--contentbreite) + 20px);
 --schriftgroesse: 16px;
 --textfarbe: #333;
 --komplementaerfarbeheller: color-mix(in srgb, var(--komplementaerfarbe) 40%, white);
 --komplementaerfarbeganzhell: color-mix(in srgb, var(--komplementaerfarbe) 10%, white);
 --komplementaerfarbedunkler: color-mix(in srgb, var(--komplementaerfarbe) 40%, black);
 --lineheight: 160%;
 --lineheight-h: calc(var(--lineheight) / 100 * 85);
 --abstandmittel: 10px;
 --rundungen: 12px;
 --rundungenKlein: 2px;
 --headerbild: url("/_img/headergr.gif");
 --headerhoehe: 120px;
 --headerbildmobil: url("/_img/headerkl.gif");
 --headerhoehemobil: 52px;
 --linkstandard: var(--farbedunkel1);
 --linkvisited: var(--farbedunkel1);
 --linkhover: var(--farbedunkel1);
 --linkactive: var(--farbedunkel1);
 /****************** invertieren ***********************/
 --linkstandard-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkvisited-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkhover-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkactive-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
}
.only-mobile {
	display: none;
}
 @media (max-width: 768px) {
.only-mobile {
	display: block;
}
}
.only-desktop {
	display: none;
}
@media (min-width: 769px) {
.only-desktop {
	display: block;
}
}
html, body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: var(--schriftgroesse);
}
nav {
	color: var(--farbedunkel1);
}
.box {
	line-height: var(--lineheight);
	max-width: 100%;
	padding: var(--abstandmittel);
	background-color: var(--farbehell3);
	border: 1px dotted var(--farbedunkel1);
	margin-bottom: var(--abstandmittel);
}
@media only screen and (min-width: 769px) {
.box {
	margin-right: auto;
	margin-left: auto;
	max-width: var(--contentbreite);
	border: 1px solid var(--farbedunkel2) !important;
}
.boxheader {
	margin-right: auto;
	margin-left: auto;
	max-width: var(--contentbreite);
	border-left: 1px solid var(--farbedunkel2);
	border-top: 1px solid var(--farbedunkel2);
	border-right: 1px solid var(--farbedunkel2);
	padding: 10px;
}
}
.trenner {
	width: 95%;
	border-top: 1px dotted var(--farbedunkel1);
	margin: 15px auto 15px auto;
	text-align: center;
}
.centered {
	text-align: center;
}
.hgwhite {
	background-color: #fff;
}
.noborder {
	border: none;
}
h1 {
	font-size: 1.5em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
h2 {
	font-size: 1.3em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
h3 {
	font-size: 1.1em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
a:link, a:visited, a:hover, a:active {
	color: var(--linkstandard);
	line-height: var(--lineheight);
}
a:link.invers, a:visited.invers, a:hover.invers, a:active.invers {
	color: var(--linkstandard-i);
	line-height: var(--lineheight);
	text-decoration: none;
}
a:link.nodec, a:visited.nodec, a:hover.nodec, a:active.nodec {
	text-decoration: none;
}
.bodyhg {
	background-image: url("/_img/hintergrund.gif");
}
.img-left {
	float: left;
	margin-right: 20px;
}
.img-right {
	float: right;
	margin-left: 20px;
}
.img-skal {
	max-width: 100%;
	height: auto;
	height: auto;
	margin-right: 15px;
	margin-bottom: 15px;
}
@media only screen and (min-width: 769px) {
.img-skal {
	max-width: 50%;
	float: left;
}
}
.img-skal2 {
	max-width: 100%;
}
.img-skal-30 {
	width: 100%;
}
@media only screen and (min-width: 769px) {
.img-skal-30 {
	max-width: 30%;
	float: left;
	margin-right: var(--abstandmittel);
}
}
/************************ Button nach oben ************************/
.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 15px;
	width: 54px;
	height: 46px;
	background: linear-gradient(to bottom, var(--farbemittel) 5%, var(--farbemittel) 100%);
	background-color: var(--farbedunkel1);
	border: 1px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	text-align: center;
	vertical-align: central;
	border-radius: var(--rundungenKlein);
	padding-top: 10px;
}
a:link.btt, a:visited.btt, a:hover.btt, a:active.btt {
	color: white;
	line-height: 1.0em;
	text-decoration: none;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 13px;
}
@media only screen and (min-width: 769px) {
.minh {
	min-height: 512px;
}
}
@media only screen and (min-width: 769px) {
.minh2 {
	min-height: 306px;
}
}
/******************** Liste neben Bild *******************/
.box .limg {
	height: auto;
	display: block;
	margin-right: 20px;
}
.box .lh1 {
	margin: 0 0 5px 0;
}
.box .lul {
	margin: 0;
	padding-left: 0;
	list-style-position: inside;
}
@media only screen and (min-width: 769px) {
.box .limg {
	float: left;
	width: 50%;
	height: auto;
	display: block;
	margin-right: 20px;
}
}
/******************* Tabellenlook 6 Spalten**************************/
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 150px; /* 👉 gleiche Höhe für alle */
	border-right: 1px dotted var(--farbemittel);
	border-left: 1px dotted var(--farbemittel);
	border-top: 1px dotted var(--farbemittel);
	margin-bottom: var(--abstandmittel);
}
.item {
	border-right: 1px dotted var(--farbemittel);
	border-bottom: 1px dotted var(--farbemittel);
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
/* Bild sauber einpassen */
.item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	display: block;
}
/* Mobile: rechte Linie entfernen */
.item:nth-child(3n) {
	border-right: none;
}

/* Desktop */
@media (min-width: 769px) {
.grid {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 180px; /* optional andere Hoehe */
}
.item:nth-child(3n) {
	border-right: 1px dotted var(--farbemittel);
}
.item:nth-child(6n) {
	border-right: none;
}
}
/************* 3 boxen einfach nebeneinandder*************************/
.container {
	width: 100%;
}
.box3 {
	float: left;
	width: 31.33%;
	margin: 1%;
	box-sizing: border-box;
	padding: 20px;
	background: color-mix(in srgb, var(--farbemittel), white 90%);
	border: 1px dotted var(--farbemittel);
}
/* clearfix */
.container::after {
	content: "";
	display: block;
	clear: both;
}

/* Handy / kleine Bildschirme */
@media (max-width: 768px) {
.box3 {
	float: none;
	width: 100%;
	margin-bottom: var(--abstandmittel);
}
}
/************* 4 boxen einfach nebeneinander*************************/


.container-grid {
	display: grid;
	grid-template-columns: 1fr;   /* Mobile */
	gap: var(--abstandmittel);
}
/* einzelne Box */
.container2 {
	border: 1px dotted var(--farbemittel);
	display: flex;
	flex-direction: column;       /* Bild oben, Text unten */
	height: 100%;
}
/* Bildbereich */
.container2 img {
	width: 100%;
	height: auto;                 /* 👉 bleibt proportional */
	display: block;
}
/* Textbereich */
.container2 .text {
	padding: 10px;
	flex: 1;                      /* 👉 füllt den Rest der Höhe */
	overflow: hidden;             /* optional: verhindert Überlaufen */
}

/* Desktop */
@media (min-width: 768px) {
.container-grid {
	grid-template-columns: repeat(4, 1fr); /* 4 nebeneinander */
	align-items: stretch;
	gap: var(--abstandmittel);        /* 👉 gleiche Höhe */
}
}
/******************** kartengrid ********************/



.karten-grid {
	width: 768px;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	align-items: start;
}
.karten-grid .cegt, .karten-grid .leer {
	box-sizing: border-box;
	border: 1px solid #ccc;
	min-width: 0;
	height: auto;
	min-height: 0;
	aspect-ratio: auto !important;
}
.karten-grid .cegt {
	min-height: 100px;
	background: #fff;
	padding: 1px 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: visible !important;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	line-height: 1;
	font-size: 0.7em;
}
@media (min-width: 769px) {
.karten-grid .cegt {
	min-height: 120px;
	background: #fff;
	padding: 8px 4px;
	overflow: visible !important;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	line-height: 1.25;
	font-weight: bold;
	font-size: 16px;
}
}
.karten-grid .cegt b {
	display: block;
	max-width: 100%;
	white-space: normal;
	overflow: visible;
}
.karten-grid .cegt.bild {
	padding: 0;
}
.karten-grid .cegt.bild img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
/******************** kartengrid Ende ********************/
.karten-grid .cegt.tabhigh {
	background: #fff2b8;
}
.nobgcolor {
	background: none;
	background-color: transparent;
}
.select {
	width: 30%;
	padding: 12px 16px;
	font-size: var(--schriftgroesse);
	color: var(--farbedunkel2);
	background: #fff;
	border: 1px solid var(--farbedunkel2);
	outline: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 6px;
	padding: 6px 24px;
	font-family: var(--schriftart);
}
.flagge-de {
	background-image: url(/_img/dek.gif);
	margin-right: 10px;
	border: none;
	width: 35px;
	height: 21px;
}
.flagge-uk {
	background-image: url(/_img/ukk.gif);
	border: none;
	width: 35px;
	height: 21px;
}