*, *::before, *::after {
  box-sizing: border-box;
}

* {
	color: #444444;
}

a {
  text-decoration: none;
  font-weight: normal;
  color: #444444;
}

a:hover {
  color: #000000;
}

a:active {
  color: #777777;
}

.wie_a {
  text-decoration: none;
  font-weight: normal;
  color: #444444;
}

.wie_a:hover {
  color: #000000;
}

.wie_a:active {
  color: #777777;
}

b {
	font-weight: bold !important;
}

strong {
	font-weight: bold !important;
}

u {
	text-decoration: underline !important;
}

.links {
    text-align: left;
}

.rechts {
    text-align: right;
}

.center {
	align-items: center;
	justify-content: center;
}
	
.blocksatz {
    text-align: justify;
}

.blocksatz_l {
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
}

.blocksatz_r {
    hyphens: auto;
    text-align: justify;
    text-align-last: right;
}

.blocksatz_c {
    hyphens: auto;
    text-align: justify;
    text-align-last: center;
}

.blocksatz_j {
    hyphens: auto;
    text-align: justify;
    text-align-last: justify;
}

h1 { 
	font-size:1.3rem; 
	margin:20px 0 12px;
	}

h2 { 
	font-size:1.1rem; 
	}

.h1_schrift { 
	font-size:1.3rem; 
	line-height: 1.5;
	}

.h2_schrift { 
	font-size:1.1rem;
	}

.h1_block { 
	font-size:1.3rem; 
	line-height: 1.5;
	margin:20px 0 12px;
	}

.h2_block { 
	font-size:1.1rem;
	line-height: 1.5;
	margin:10px 0 8px;
	}

.kleinschrift {
	font-size: 0.8rem;
   }

.kleinschrift_08 {
	font-size: 0.8rem;
   }
   
.kleinschrift_09 {
	font-size: 0.9rem;
   }
   
.kleinschrift_095 {
	font-size: 0.95rem;
   }

.grossschrift_12 {
	font-size: 1.2rem;
   }

.ul_disc { 
	list-style-type: disc; 
	margin:0 0 8px 20px; 
}

.ul_none {
	list-style: none; 
	margin:0 0 8px 20px; 
}

.margin_0_0_8_20 {
	list-style: none; 
	margin:0 0 8px 20px; 
}

.section {
	padding:0;
	border-top:1px solid #eee;
}

.linie_unten {
	padding:0;
	border-bottom:1px solid #eee;
}

.nicht_markierbar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
	text-align: center;
	margin: 0px auto;
	height: 100%;
	width: 100%;
}

body {
    box-sizing: border-box;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111;
	font-family: Arial, Helvetica, 'Open Sans', sans-serif;
	color: #444444;
	font-size: 1.0rem;   /* = 16px */
	font-size: 0.875rem; /* = 14px */
	font-size: 0.9rem;   /* = 14.4px */
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-align: center;
    overflow-x: hidden;
	text-align: center;
	height: 100%;
	width: 100%;
	background-color: #C3DBEE;
}

header {
	position: sticky;
	top: 0;
	display:block;
	margin: 0px auto;
	padding: 0;
	margin-bottom: 16px;
	z-index: 10;
	vertical-align:top;
	width:100%;
	height: 90px;
	text-align:center;
	border: 0;
	border-style: none;
	max-width: 950px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Schatten nur nach unten */
	background-color: #ffffff;
}

.div_haupt {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	vertical-align: top;
	margin: 0 auto;
	padding: 0;
	max-width: 950px;
	border: 0;
	border-style: none;
	box-shadow: -8px 0 12px -2px rgba(0,0,0,0.3), 8px 0 12px -2px rgba(0,0,0,0.3); /* Schatten nur nach links außen und rechts außen*/
	background-color: #ffffff;
}

main {
	flex: 1;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #ffffff;
}

footer {
	box-shadow: 0 -6px 12px rgba(0,0,0,0.2); /* Schatten nur nach oben */
}

.grid_container {
  display: grid;
  gap: 1rem;
  /* Zauberformel */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.flex_container {
	display: flex;
	flex-wrap: wrap;   /* erlaubt den Umbruch */
}

.flex_element_200 {
  flex: 1 1 300px;   /* Elemente dürfen umbrechen, Basisbreite 300px */
  padding: 1em;
  border: 1px solid #ccc;
}

.flex_element_300 {
  flex: 1 1 300px;   /* Elemente dürfen umbrechen, Basisbreite 300px */
  padding: 1em;
  border: 1px solid #ccc;
}

.flex_element_600 {
  flex: 1 1 600px;   /* Elemente dürfen umbrechen, Basisbreite 600px */
  padding: 1em;
  border: 1px solid #ccc;
}

/* Standard-Anzeige- bzw. Umbruch-Reihenfolge */
.reihenfolge_a { order: 1; }
.reihenfolge_b { order: 2; }
.reihenfolge_c { order: 3; }
.reihenfolge_d { order: 4; }
.reihenfolge_e { order: 5; }

.div_inhalt_1 {
	text-align: left;
	vertical-align: top;
	width: inherit;
	margin: 0 ;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-style: none;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}

.div_inhalt_1 a { 
	text-decoration:underline;
}

.div_inhalt_1_5 {
	line-height:1.5;
	text-align: left;
	vertical-align: top;
	width: inherit;
	margin: 0 ;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-style: none;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}

.div_inhalt_1_5 a { 
	text-decoration:underline;
}

.div_inhalt_2 {
	text-align: left;
	vertical-align: top;
	width: inherit;
	margin: 0 ;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-style: none;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}

.div_inhalt_2 a { 
	text-decoration:underline;
}

.div_seitenfuss {
	width: 100vw;
	bottom: 0;
	padding: 0;
	border-style: none;
	border-top: 1px solid #dcdcdc;
	text-align: center;
	max-width: 950px;
	margin: 0px auto;
}

.div_navbar_unten {
	display:table-cell;
	height: 32px;
	width: 100vw;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-style: none;
	background-color: #eaeaee;
}

.seitenaufteilung_div_aussen {
      width: 100%;
      margin: 0 auto;
      display: flex;
      min-height: 100vh; /* volle Höhe */
      background: #ffffff;
      border: 1px solid #ccc;
}

.seitenaufteilung_linke_spalte {
      width: 300px;
      padding: 10px;
      background: #eaeaee;
      text-align: left;
}

.seitenaufteilung_rechte_spalte {
      flex: 1;
      padding: 20px;
}

form {
	display: contents;
}

summary {
  margin: 12px;
  cursor: pointer;
  font-weight: bold;
}

  details {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.navbar {
  background-color: Lightgray;
  height: 40px;
}

nav {
	position:relative;
	display:table-cell;
	vertical-align: middle;
	height:2em;
	float: center;
	margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.div_ueberschriften {
	display: flex; 
	justify-content: space-between;
	margin: 0;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 5px;
	padding-right: 20px;
	font-size: 1.3rem;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
	z-index: 9;
	background-color: #ffffff;
}

.div_ueberschriftblock_tierliste {
	position: sticky;
	top: 90px;
	display: flex; 
	justify-content: space-between;
	margin: 0;
	margin-left: -2px;
	margin-right: -2px;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 5px;
	padding-right: 20px;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
	z-index: 9;
	background-color: #ffffff;
}

.span_links_ueberschriften {
	padding: 0px 3px 0px 0px;
	text-align: left;
	vertical-align: middle;
}

.span_mitte_ueberschriften {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	font-size: 1rem;
	text-align: center;
	justify-content: center;
}

.span_rechts_ueberschriften {
	width: 66px;
	display: inline-box;
	text-align: center;
	font-size: 0.9rem;
	padding: 0px 2px 0px 2px;
}

.limitForm {
	padding: 0 0 8px 0;
	display: inline-block;
	align-items: center;
	justify-content: center;
}

.sel_list_limit {
	padding: 1px;
	width: 50px;
	height: 28px;
	font-size: 0.9rem;
}

.limitForm_text {
	padding: 0 2px 0 2px;
	font-size: 0.9rem;
}

.span_zusatz_ueberschrift {
	font-size:1rem;
}

.span_tie_id_text_zusatz {
	display: inline-flex;
	align-items: flex-end;
	font-size:1rem;
}

.div_fotoaufnahme{
	display:table-cell;
	width: 100vw;
	max-width: 950px;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-style: none;
}

.anmerkung_klein{
	font-size: 0.8rem;
}

.klick_button{
  width: 60px;
  height: 60px;
  background-image: url('../images/klick_60.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  margin: 15px;
}

.div_foto_klick{
	display:table-cell;
	width: 100vw;
	max-width: 950px;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-style: none;
}

.span_foto{
	display: inline;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-style: none;
}

.span_klick{
	display: inline;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-style: none;
}

.abbruch_klick_kreuz{
	display: inline;
	width: 25px;
	height: 25px;
	background-image: url('../images/abbruch_klick_kreuz.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
	margin: 0;
	margin-right: 10px;
}

.span_abbruch_klick_kreuz{
	display: inline-box;
	width: 10%;
	text-align: right;
	vertical-align: top;
    position: relative;
	border-style: none;
}

.details_hellgrau{
	background-color: #eaeaee;
}

.form_bg_hellgrau{
	background-color: #eaeaee;
	padding: 20px 5px 15px 5px;
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
	column-gap: 15px;
	border: 0;
	padding: 0px;
	margin: 0;
	margin-bottom: 10px;
}

.form-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.such_form_row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
	column-gap: 15px;
	border: 0;
	padding: 0px;
	padding-bottom: 0px;
	margin: 0;
	margin-bottom: 10px;
}

.such_form_group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

   .label_such_form {
	margin: 0;
	padding: 2px 2px 2px 4px;
	font-weight: bold;
   }

   .sel_text_form {
	margin: 0;
	padding: 2px 2px 2px 4px;
	font-weight: normal;
  display: flex;
  align-items: center; /* vertikal zentrieren */
  gap: 0.5rem;        /* Abstand zwischen Checkbox und Text */
   }

.checkbox_radio_label_zeile {
	margin: 0;
	padding: 2px 0 2px 0;
	font-weight: normal;
	display: flex;
	align-items: center; /* vertikal zentrieren */
	gap: 0.5rem;        /* Abstand zwischen Checkbox und Text */
}

input[type="text"],
input[type="email"],
input[type="checkbox"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	min-height: 16px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	background-color: #ffffff;
}

input[type="checkbox"] {
	padding: 8px;
	margin: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
}

.such_form_group input[type="checkbox"] {
		padding: 0;
		margin: 0;
		border: 10px solid #00ffff !important;
		border-radius: 5px;
		font-size: 14px;
	
}
input[type="submit"] {
	background-color: #eaeaee;
	padding: 8px 16px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
}

input[type="submit"]:hover {
	background-color: #e3e3e8;
}

input:focus {
	border-color: #6699CC;
	outline: none;
	box-shadow: 0 0 0 3px rgba(102, 153, 204, 0.3);
}

   label {
	margin: 0;
	padding: 0px;
   }

   .label_form {
	margin: 0;
	padding: 2px 2px 2px 4px;
   }

   textarea {
     width: 100%;
     max-width: 500px;
     height: 100px;
  box-sizing: border-box;
  outline: none;
     resize: vertical;
   }
   .tier_form_textarea {
     min-width: 250px;
   }

   .feld_min_breite_1 {
     width: auto;
     min-width: 100px;
   }
   
   .feld_min_breite_100 {
     width: auto;
     min-width: 100px;
   }

   .feld_min_breite_150 {
     width: auto;
     min-width: 100px;
   }

   .feld_min_breite_2 {
     width: auto;
     min-width: 200px;
   }

   .form-section {
     margin-bottom: 20px;
   }

   .form-actions {
     text-align: center;
   }

   .checkbox-group {
     display: flex;
     flex-direction: column;
   }

   .div_radio {
     padding: 3px;
   }

   .button-container {
     display: flex;
     justify-content: center; /* Zentriert die Buttons horizontal */
     gap: 20px;               /* Fester Abstand zwischen den Buttons */
     padding: 20px;
  color: #444444;
   }

   .button-container button {
     padding: 10px 20px;
     font-size: 16px;
  color: #444444;
   }

.videobox{
	display:inline-block;
	height: 80vh;
	width: auto;
	max-width: 800px;
	text-align: center;
	vertical-align: middle;
    position: relative;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	margin: 1px auto;
}

/*********************************/
/* Anfang Tabelle Tierliste */
/*********************************/
    .tabelle_tier_liste {
		display: inline-flex;
		padding: 0;
		margin: 0;
		margin-bottom: 10px;
		border: 0;
		width: 100%;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		background-color: #ffffff;
    }
	
    .tabelle_tier_liste_links {
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 120px auto; /* 2 Spalten */
		grid-template-columns: 120px auto auto; /* 3 Spalten */
		grid-template-columns: 120px 4% auto; /* 3 Spalten */
		padding: 0px;
		margin: 0;
		border: 0;
	justify-content: left; /* horizontal */
	align-items: center;     /* vertikal */
		width: 100%;
		background-color: red;
		background-color: #ffffff;
    }
	
    .tabelle_tier_liste_rechts {
		background-color: #ffffff;
		display: grid;
		grid-template-columns: 90px 70px 90px 92px; /* 4 Spalten */
		padding: 0px;
		margin: 0;
		border: 0;
		min-width: 342px;
    }
		
    .cell {
      border: 1px solid #ddd;
      padding: 5px;
      box-sizing: border-box;
    }

    .hidden_cell {
		border: 0;
		padding: 0;
		margin: 0;
		display: flex; gap: 4px;
    }
	
    .button_icon {
		border: 1px solid #ddd;
		padding: 0;
		margin: 0;
		margin-top: 4px;
		margin-left: 4px;
    }

    .header {
      background-color: #f0f0f0;
      font-weight: bold;
    }

    .colspan-2 {
      grid-column: span 2;
    }

    .colspan-3 {
      grid-column: span 3;
    }

    .rowspan-2 {
      grid-row: span 2;
    }
	
    .cell_foto {
    	padding: 0;
    	margin: 0;
	    max-height: 120px;
	    max-width: 120px;
	    height: 120px;
	    width: 120px;
		display: flex;
		justify-content: center; /* horizontal */
		align-items: center;     /* vertikal */
		overflow: hidden;
		background: #ffffff;
    }
/*
    .foto_liste {
	    width: 100%;
	    height: 100%;
		object-fit: cover; 
		object-position: center center;
		display: block;
    }
	*/
    .foto_liste {
	    max-height: 120px;
	    max-width: 120px;
    	padding: 0;
    	margin: 0;
		object-fit: cover; 
		object-position: center center;
		display: inline-block;
    }
	
    .cell_puffer {
		height: 100%;
    	padding: 0;
    	margin: 0;
    }
	
    .cell_button_beschreibung {
		height: 100%;
		width: 100%;
    	padding: 5px;
		padding-left: 0;
		display: flex;
		flex-direction: column; /* übereinander */
		justify-content: center; /* vertikal zentriert */
		align-items: flex-start; /* linksbündig */
		text-align: left;
		border: none;
		cursor: pointer;
		background-color: #ffffff;
    }

    .cell_name {
		font-size:1.0rem;
		font-weight: bold;
		border: 0;
      	padding: 0;
      	padding-bottom: 8px;
    }
	
    .cell_rasse {
		font-size:1.1rem;
		border: 0;
      	padding: 0;
      	padding-bottom: 1px;
    }
	
    .cell_farbe {
		font-size:1.0rem;
		font-weight: normal;
		border: 0;
      	padding: 0;
    }
	
    .cell_link {
    	/*display: flex; gap: 1rem;*/
    }
	
    .cell_icon_buttons {
      	grid-row: span 2;
		border: 1px solid #ccc;
		padding: 5px;
		box-sizing: border-box;
    }
	
	.action-button {
      /*width: 60px;*/
    }
	
	.cell_benennung {
		font-size: 0.6rem;
    	padding-bottom: 4px;
    }

	.cell_kennung {
		min-width: 92px;
    }
	
	.pagination {
		display: flex;
		justify-content: center;
		gap: 3px;            
		text-align: center;
		margin: 0;
      	padding: 0;
      	padding-top: 5px;
	}

	.pagination button {
      	padding: 4px 8px;
		margin: 3px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.0rem;
		cursor: pointer;
		text-decoration: none;
		background-color: #eaeaee;
	}
	
	.pagination button:hover {
		background-color: #e3e3e8;
	}

	.pagination_wz {
		display: flex;
		justify-content: center;
		gap: 3px;            
		text-align: center;
		margin: 0;
      	padding: 0;
      	padding-top: 5px;
      	padding-bottom: 10px;
	}

	.pagination_wz button {
      	padding: 4px 8px;
		margin: 3px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.0rem;
		cursor: pointer;
		text-decoration: none;
		background-color: #eaeaee;
	}
	
	.pagination_wz button:hover {
		background-color: #e3e3e8;
	}

	.seitenzahl_button {
      	padding: 4px 8px;
		margin: 3px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.0rem;
		cursor: pointer;
		text-decoration: none;
		background-color: #eaeaee;
	}

	.aktuelle_seitenzahl {
      	padding: 4px 8px;
		margin: 3px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.2rem;
		text-decoration: underline;
		color: #444444;
		background-color: #eaeaee;
		opacity: 0.6;
	}

	.aktuelle_seitenzahl:hover {
		cursor: text;
		opacity: 0.5;
	}
	
	.span_zurueck_weiter_button {
		display: inline;
      	padding: 0;
		margin: 0;
	}

	.span_a_zurueck_weiter_button {
		display: inline;
      	padding: 0;
		margin: 0;
	}
	
	.zurueck_weiter_button {
		display: inline;
      	padding: 4px 8px;
		margin: 0;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.0rem;
		cursor: pointer;
		text-decoration: none;
		background-color: #eaeaee;
		background-color: rot;
	}

	.blinder_zurueck_weiter_button {
		display: inline;
      	padding: 4px 8px;
		margin: 0;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1.0rem;
		color: #444444;
		background-color: #eaeaee;
		opacity: 0.6;
	}

	.blinder_button:hover {
		cursor: vertical-text;
		opacity: 0.5;
	}
	
	.pagination .dots {
		padding: 6px 4px;
		color: #444444;
		font-size: 1.0rem;
	}
	
    .search-container {
	  width: 130px;
      padding: 0;
      margin: 0;
    }

    .search-container #searchInput {
      padding: 0;
      font-size: 0.8rem;
	  width: 130px;
	  height: 26px;
    }

	.icon-button {
		display: inline-block;
		align-items: center;
		justify-content: center;
		width: 26px;
	  	height: 26px;
		font-size: 20px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.icon_button_container {
	  width: 130px;
		margin-top: 3px;
		display: flex;
		justify-content:space-between;
		align-items: center;
	}

	.search-container button:hover {
		background-color: #e0e0e0;
	}

	.search-container button:active {
		background-color: #d0d0d0;
	}

    .mark {
      background-color: yellow;
    }

    mark.active {
      background-color: orange;
    }
	
    .span_mitte_ueberschriften .result_info {
		display: flex;
		margin: 0px;
      	padding: 0px;
		font-size: 0.9rem;
		width: 130px;
		height: 26px;
		text-align: center;
		align-items: center;
		justify-content: center;
    }
/*********************************/
/* Ende Tabelle Tierliste */
/*********************************/

/************************************/
/* Anfang Foto-Gallerie bei Tierliste */
/************************************/
	#galerie_Layer {
	  display: none;
	  position: fixed;
	  top: 0; 
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  background-color: rgba(0, 0, 0, 0.85);
	  z-index: 9999;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	  box-sizing: border-box;
	  padding: 5px;
	  user-select: none;
	}

	.galerie_bild-zaehler {
	  display: none;
	  color: white;
	  font-size: 16px;
	  margin-top: 5px;
	  margin-bottom: 5px;
	  text-align: center;
	}

	#galerie_thumbnailWrapper {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: flex-start;
	  width: 100%;
	  max-height: calc(40px * 2); /* maximal zwei Reihen */
	  overflow: hidden;
	  padding: 0;
	  box-sizing: border-box;
	}

	.galerie_thumbnails_anzeige {
	  display: flex;
	  flex-wrap: wrap;
	  color: white;
	  font-size: 16px;
	  margin-top: 5px;
	  margin-bottom: 5px;
	  justify-content: center;
	  align-items: flex-start;
	  gap: 4px;
	  width: 100%;
	}

	.galerie_thumbnails_anzeige img {
	  height: 40px;
	  aspect-ratio: 1 / 1;
	  object-fit: cover;
	  cursor: pointer;
	  border: 2px solid transparent;
	  border-radius: 4px;
	  transition: transform 0.2s;
	  flex-shrink: 1;
	}

	.galerie_thumbnails_anzeige img.active {
	  border-color: #00aaff;
	  transform: scale(1.05);
	}

	.galerie_main-image-container {
	  position: relative;
	  flex-grow: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  max-height: calc(100vh - 100px); /* Platz für Thumbnails + Abstand */
	  box-sizing: border-box;
	}

	.galerie_main-image-container img {
	  max-height: 100%;
	  max-width: 100%;
	  object-fit: contain;
	}

	.galerie_close-btn {
	  position: absolute;
	  top: 10px; 
	  right: 15px;
	  font-size: 28px;
	  color: rgba(255,255,255,0.8);
	  background: rgba(0,0,0,0.6);
	  border: none;
	  border-radius: 50%;
	  width: 36px;
	  height: 36px;
	  cursor: pointer;
	  z-index: 10000;
	}
	
	.galerie_close-btn:hover {
	    color: rgba(0,0,0,0.6);
	    background: rgba(255,255,255,0.7);
	}

	.galerie_pfeil {
		display: inline;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28px;
		color: rgba(255,255,255,0.8);
		background: rgba(0,0,0,0.6);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		z-index: 10;
	}

	.galerie_pfeil:hover {
	    color: rgba(0,0,0,0.6);
	    background: rgba(255,255,255,0.7);
	}

	.galerie_pfeil.links  { 
		left: 15px; 
	}
	
	.galerie_pfeil.rechts { 
		right: 15px; 
	}
/************************************/
/* Ende Foto-Gallerie bei Tierliste */
/************************************/

/****************************/
/* Anfang Tier-Detail-Seite */
/****************************/
	.details_block {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		padding: 0;
		padding-bottom: 1rem;
		justify-content: space-between;
		background-color: #d0e6f7;
		background-color: #ffffff;
	}
	
    .div_legend_gruppe {
      border: 1px solid #ccc;
      padding: 1.5rem 1rem 1rem 1rem;
      padding: 0;
      padding: 1rem 0 1rem 0;
      margin: 1rem 0;
      margin: 0;
      margin: 1rem 0 0 0;
      position: relative;
      border-radius: 8px;
    }

    .div_legend_gruppe_titel {
      position: absolute;
      top: -0.8rem;
      left: 1rem;
      padding: 0 0.5rem;
      font-size: 1rem;
      background-color: white;
    }

	.details_innen_box {
		color: #444444;
		display: box flex;
    	flex-direction: column;
		justify-content: space-between;
		flex: 1 1 calc(33% - 1rem); /* 3 Boxen pro Zeile max. */
		background-color: #90caf9;
		background-color: #ffffff;
	}
	
	.details_zeile {
		width: 100%;
		padding: 0;
		padding-bottom: 0;
  		display: flex;
		flex-wrap: wrap;
		gap: 1px;
		justify-content: space-between;
		border: 0;
		background-color: #d0e6f7;
		background-color: #ffffff;
	}
	.details_spalte {
		display: flex;
		flex: 1 1 auto;
		gap: 1px;
		padding: 5px 5px 5px 5px;
		justify-content: center;
		border: 0;
		background-color: #90caf9;
		background-color: cyan;
		background-color: #ffffff;
	}
    .details_box {
		border: 1px solid #cdcdcd;
		border-radius: 6px;
		padding: 5px;
		position: relative;
		margin: 5px;
		align-items: left;
		justify-content: left;
		text-align: left;
		width: 100%;
    }
	.details_benennung {
		font-size: 0.8rem;
		padding: 0px 5px 0px 5px;
    }
	.details_wert {
		font-size: 1rem;
    	padding-bottom: 4px;
    }
	.details_div_fotos {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row; /* Wird dynamisch angepasst */
		align-items: flex-start;
		gap: 10px;
		width: 100%;
	}
    .details_main-image_kein_bild {
		box-sizing: border-box;
		width: 100%;
		border: 2px solid #ccc;
		cursor: auto;
    }
    .details_main-image {
		box-sizing: border-box;
      	width: 100%;
		border: 2px solid #ccc;
		border: 0;
		box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
		cursor: zoom-in;
    }
	.details_main-image.vertical {
		box-sizing: border-box;
      	width: calc(100% - 50px);
	}
	.details_main-image.horizontal {
		box-sizing: border-box;
      	width: 100%;
	}
    .details_thumbnail {
		box-sizing: border-box;
		height: 28px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		cursor: pointer;
		border: 1px solid transparent;
		border-radius: 4px;
		transition: transform 0.2s;
		flex-shrink: 1;
    }
    .details_thumbnail.active {
		transform: scale(1.05);
		border-color: blue;
    }
    .details_thumbnail:hover {
		transform: scale(1.6);
    }
	.details_thumbnails {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		gap: 1px;
	}
	.details_thumbnails.vertical {
		box-sizing: border-box;
		flex-direction: column;
		/*margin-top: 0;*/
		/*margin-left: 5px;*/
	}
	.details_thumbnails.horizontal {
		box-sizing: border-box;
		flex-direction: row;
	}
	
/**************************/
/* Ende Tier-Detail-Seite */
/**************************/

/**************************/
/* Anfang Start-Seite */
/**************************/

	.startseite_infoblock {
    padding: 0;
    margin: 0;
	border: 0;
	display: inline-block;
	width: 100%;
	background: #ffffff;
	}
	.startseite_infoblock details {
	list-style: none; /* entfernt den Pfeil */
  	font-weight: normal;
	margin: 0;
	padding: 0;
	border: 0;
	display: inline-block;
	width: 100%;
	max-width: 680px;   /* Standardbreite */;
	background: #ffffff;
	}
	.startseite_infoblock details summary {
	list-style: none; /* entfernt den Pfeil */
  	font-weight: normal;
    margin: 0;
    padding: 0;
	border: 0;
	display: inline-block;
	width: 100%;
	}
	/* Standard-Dreieck-Symbol des Browsers ausblenden */
	.startseite_infoblock details summary::-webkit-details-marker {
	display: none;
	}
	.startseite_infoblock_text {
    padding-top: 5px;
	font-size: 0.9rem;
	line-height:1.4;
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
    padding-bottom: 5px;
	}
	/* Standard: "Mehr lesen" sichtbar */
	details summary .mehr_linktext {
	cursor: pointer;
	color: #0a66c2;
	text-decoration: underline;
	display: inline;
	}
	details[open] summary .weniger_linktext {
	cursor: pointer;
	color: #0a66c2;
	text-decoration: underline;
	display: inline;
	}
	/* Standard: "Mehr lesen" sichtbar */
	details summary .mehr_block {
	text-align: center;
	display: inline;
	}
	/* Wenn geöffnet: "Mehr lesen" ausblenden, "Weniger lesen" einblenden */
	details[open] summary .mehr_block {
	display: none;
	}
	/* Standard: "Mehr lesen" sichtbar */
	details summary .mehr_link_block {
    padding: 0;
    padding-bottom: 10px;
	text-align: center;
	display: block;
	}
	details[open] summary .mehr_link_block {
	display: none;
	}
	details summary .weniger_block {
	display: none;
	}
	details[open] summary .weniger_block {
	text-align: center;
	display: inline;
	}
	details summary .weniger_link_block {
	display: none;
	}
	details[open] summary .weniger_link_block {
    padding: 0;
    padding-bottom: 10px;
	text-align: center;
	display: block;
	}
	
/* sorgt dafür, dass bei zu wenig Platz umgebrochen wird
	.index_box {
		display: flex;
		flex-wrap: wrap;
	} 
*/
.index_grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.tabelle_startseite_bestandsliste {
min-width: 210px;
cursor: default;
}

.ueberschriftzelle_startseite_bestandsliste {
font-size: 1.05rem;
text-align: left;
cursor: default;
padding: 0px 1px 8px 1px;
border: 0;
border-bottom: 1px solid #ccc;
border-radius: 0.5rem 0.5rem 0 0;
background-color: #ffffff;
}

.zeile_startseite_bestandsliste{
display: flex;
width: 100%;
margin: 0;
padding: 0;
padding: 6px 3px 5px 3px;
border: 0;
border-bottom: 1px solid #ccc;
cursor: pointer;
background-color: #ffffff;
}

.zeile_startseite_bestandsliste:hover{
background-color: #F1F1F3;
}

.unterste_zeile_startseite_bestandsliste {
padding: 8px 3px 5px 3px;
border: 0;
}

.zelle_startseite_bestandsliste_links {
font-size: 0.9rem;
margin: 0;
padding: 0;
border: 0;
flex: 1;                     /* nimmt die restliche Breite */
text-align: left;
background: transparent;
}

.zelle_startseite_bestandsliste_rechts {
font-size: 0.9rem;
margin: 0;
padding: 0;
border: 0;
width: 20%;                 /* feste Breite */
text-align: right;
background: transparent;
}

.index_kachel_element {
padding: 1rem 1.5rem 0.5rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 0 18px rgba(0,0,0,0.2);
text-align: center;
transition: box-shadow 0.3s ease;
cursor: pointer;
border: none;
width: 100%;
min-height: 250px;
background-color: #ffff;
}

.index_kachel_element:hover {
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.index_kachel_element h2 {
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 0.8rem;
}

.index_kachel_icon {
width: 48px;
height: 48px;
margin-bottom: 1rem;
display: inline-block;
}

.index_kachel_icon svg {
width: 100%;
height: 100%;
}

/* Standard-Layout bei voller Breite (3 Spalten) */
.index_grid .A { grid-column: 1; grid-row: 1; cursor: default; }
.index_grid .B { grid-column: 2 / span 2; grid-row: 1; min-height: 100px; cursor: default; } /* nimmt 2 Spalten ein */
.index_grid .C { grid-column: 1; grid-row: 2; }
.index_grid .D { grid-column: 2; grid-row: 2; }
.index_grid .E { grid-column: 3; grid-row: 2; }

/* 2 Spalten bei mittlerer Breite */
@media (min-width: 501px) and (max-width: 745px) {
	.index_grid {
		grid-template-columns: repeat(2, minmax(200px, 1fr));
	}

	.index_grid .B { grid-column: 1 / span 2; grid-row: 1; }
	.index_grid .A { grid-column: 1; grid-row: 2; }
	.index_grid .C { grid-column: 2; grid-row: 2; }
	.index_grid .D { grid-column: 1; grid-row: 3; }
	.index_grid .E { grid-column: 2; grid-row: 3; }
}

/* 1 Spalte bei geringer Breite */
@media (max-width: 500px) {
	.index_grid {
		grid-template-columns: 1fr;
	}

	.index_grid .B { grid-column: 1; grid-row: 1; }
	.index_grid .A { grid-column: 1; grid-row: 2; }
	.index_grid .C { grid-column: 1; grid-row: 3; }
	.index_grid .D { grid-column: 1; grid-row: 4; }
	.index_grid .E { grid-column: 1; grid-row: 5; }
}



	
/**************************/
/* Ende Start-Seite */
/**************************/

/**************************/
/* Anfang Seitenkopf */
/**************************/
.div_logo {
	position: relative;
	height: 82px;
	width: 100px;
	float: left;
	margin: 0px;
	padding: 0px;
	border-style: none;
	background-color: #ffffff;
}

.div_logo a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.div_logo img {
	position: absolute;
	object-fit: cover;
	transition: opacity 0.3s ease;
	height: 80px;
	width: auto;
	top: 2px;
	left: 2px;
	margin: 0;
	margin-left: 6px;
	padding: 0;
	border: 0;
}

.img_logo_hover {
  opacity: 0;
}
/*
a:hover .img_logo_hover {
  opacity: 1;
}

a:hover .img_logo {
  opacity: 0;
}
*/
a:active .img_logo_hover {
  opacity: 1;
}

a:active .img_logo {
  opacity: 0;
}

.img_reset {
	height: 34px;
	width: 34px;
}

.div_sysname {
	height: 40px;
	width: auto;
	float: top;
	text-align: left;
	vertical-align: middle;
	margin-left: 100px;
	padding-top: 13px;
	padding-left: 10px;
    position: relative;
	border-style: none;
	background-color: #ffffff;
}

.sysname_text {
	font-size:2em;
	color: #444444;
	text-decoration: none;
}

.sysname_text:hover {
	color: #444444;
}

.tld_domain {
	font-size:0.6em;
	color: #444444;
}

.div_suchleiste {
	height: auto;
	width: auto;
	padding-top: 10px;
	padding-left: 10px;
	margin-left: 100px;
	margin-right: 5px;
	float: none;
	text-align: right;
	vertical-align: middle;
	font-size:1em;
    position: relative;
	border-style: none;
	background-color: #ffffff;
}

.suchleiste_form {
	display: flex;
	flex: 1;
	width: 100%;
	height: 30px !important;
	background-color: #ffffff;
}

#suchleiste_form_x_button {
	height: 30px !important;
	width: 30px !important;
	border: 1px solid #ccc;
	border-radius: 0 0 0 0;
	border-right: none;
	font-size: 20px !important;
	cursor: pointer;
	background-color: #F1F1F3;
}

.suchleiste_form_x_button:focus {
	outline: 1px solid #444444 ;
}

.suchleiste_form input[type="text"] {
	flex: 1;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 8px 0 0 8px;
	border-right: none;
	font-size: 0.9em;
	width: 100%;
}

.suchleiste_form select {
	height: 30px;
	width: auto;
	padding: 5px 5px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 1px solid #ccc;
	border-radius: 0 0 0 0;
	font-size: 0.8em;
	background-color: #F1F1F3;
}

.suchleiste_form select:hover {
	background-color: #ECECEF;
}

.suchleiste_form select option{
	background-color: #ffffff;
}

.suchleiste_form select option:hover{
	background-color: #ECECEF; /* ...wird meist ignoriert */
}

.suchleiste_form select:focus {
	width: auto;
	/*position: absolute;*/
	z-index: 1;
}

.suchleiste_form button {
	padding: 5px 12px;
	border: 1px solid #dcdcdc;
	border-left: none;
	color: #444444;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F1F1F3;
}

.suchleiste_form button svg {
	width: 25px;
	height: 25px;
	stroke: #444444;
}

.suchleiste_form button:hover {
	background-color: #ECECEF;
}

.div_anmeldung {
    cursor: pointer;
}

.m-anmeldung_titel {
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 20px;
    right: 157px;
    height: 25px;
	text-align: right;
	vertical-align: middle;
}

.label_anmeldung_symbol {
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 10px;
    right: 108px;
    height: 30px;
    width: 40px;
	text-align: center;
	vertical-align: middle;
}

.label_anmeldung_symbol img {
    position: absolute;
	object-fit: cover;
    height: 30px;
    width: auto;
	text-align: center;
	vertical-align: middle;
	border: 0;
}

.anmeldung_symbol {
    cursor: pointer;
	text-align: center;
	vertical-align: middle;
    right: 2px;
}

.zum_bereich_symbol {
    cursor: pointer;
	text-align: center;
	vertical-align: middle;
    right: 2px !important;
}

.m-menu_titel {
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 20px;
    right: 50px;
    height: 25px;
    width: 44px;
	text-align: center;
	vertical-align: middle;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 18px;
    right: 20px;
    height: 25px;
    width: 22px;
	text-align: right;
	vertical-align: middle;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #666666;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.hidden_checkbox:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
.hidden_checkbox:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
.hidden_checkbox:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

/**************************************/
/* Ende - Größen-unabhängige Vorgaben */
/**************************************/

@media only screen and (max-width: 670px), (max-height: 400px){
	header {
		height: 64px ;
	}
	
	.div_logo {
		height: 64px;
		width: 75px;
	}

	.div_logo img {
		height: 60px;
		width: 70px;
		margin-top: 1px;
		margin-left: 1px;
	}
	
	.div_sysname {
		height: 32px;
		margin-left: 75px;
		padding-top: 5px;
		padding-left: 6px;
	}
	
	.sysname_text {
		font-size:1.5em;
	}
	
	.div_suchleiste {
		height: auto;
		width: auto;
		padding-top: 2px;
		padding-left: 2px;
		margin-left: 80px;
		margin-right: 2px;
	}

	.suchleiste_form select,
	.suchleiste_form input,
	.suchleiste_form button {
		height: 25px !important;
	}

	#suchleiste_form_x_button {
		height: 25px !important;
		width: 25px !important;
	}

	.suchleiste_form button {
		border-radius: 0 5px 5px 0;
	}

    .suchleiste_form select {
		border-radius: 0 0 0 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100px;
    }
	
	.suchleiste_form button {
		padding: 4px 7px;
	}
	
    .suchleiste_form button svg {
      width: 20px;
      height: 20px;
    }
	
	.m-anmeldung_titel {
	    top: 8px;
	    right: 146px;
	}
	.m-zum_priv_bereich_titel {
	    top: 8px;
	    right: 146px;
	}
	.m-zum_oef_bereich_titel {
	    top: 8px;
	    right: 146px;
	}

	.label_anmeldung_symbol {
	    top: 0px;
	    right: 96px;
	}
	.label_anmeldung_symbol img {
	    top: 0px;
	    right: 0px;
	}
	.m-menu_titel {
		top: 8px;
		right: 38px;
	}
	.sidebarIconToggle {
	    top: 8px;
    	right: 10px;
	}
	
	.div_ueberschriften {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.1rem;
		font-weight: 500;
	}

	.div_ueberschriftblock_tierliste {
		top: 64px;
		font-size: 1.0rem;
		padding-top: 10px;
		padding-left: 5px;
		padding-bottom: 2px;
		padding-right: 5px;
	}
	
    .search-container {
	  width: 106px;
    }

    .search-container #searchInput {
	  width: 106px;
    }

	.icon_button_container {
	  width: 106px;
		margin-top: 2px;
	}

	.span_mitte_ueberschriften {
		/*display: inline;*/
		/*width: 106px;*/
	}

    .span_mitte_ueberschriften .result_info {
		font-size: 0.8rem;
		width: 106px;
    }

	.span_rechts_ueberschriften {
		font-size: 0.8rem;
	}
	
	.limitForm_text {
		font-size: 0.8rem;
	}
	
	.sel_list_limit {
		width: 45px;
		font-size: 0.8rem;
	}
	
    .cell_beschreibung {
		font-size:1em;
    }

    .cell_name {
		font-size:1rem;
    }
	
    .cell_rasse {
		font-size:1rem;
    }
	
    .cell_farbe {
		font-size:0.9rem;
    }
	
}

@media only screen and (max-width: 580px) {
	.m-anmeldung_titel {
    	display: none;
	}
	.m-zum_priv_bereich_titel {
    	display: none;
	}
	.m-zum_oef_bereich_titel {
    	display: none;
	}
	.label_anmeldung_symbol {
	    top: 0px;
	    right: 45px;
	}
	.m-menu_titel {
    	display: none;
	}
	.index_kachel_element {
		padding: 1rem 0.5rem 0.5rem 0.5rem;
	}
}

/**************************/
/* Ende Seitenkopf */
/**************************/

@media (max-width: 850px) {
	/* 2 Boxen pro Zeile bei Tablet */
	.details_innen_box {
	flex: 1 1 calc(50% - 1rem); 
	}
	/*
	.details_innen_box_nach_fotobox {
	flex: 1 1 calc(66% - 1rem); 
	}
	.details_innen_box_fotos { 
	flex: 0 0 33%; 
	}
	*/
	.details_innen_box_nach_fotobox {
	flex: 1 1 calc(50% - 1rem); 
	}
	/* Fotobox bekommt 50% Breite  */
	.details_innen_box_fotos { 
	flex: 1 1 calc(50% - 1rem); 
	}
}

@media (max-width: 700px) {
	/* 2 Boxen pro Zeile bei Tablet */
	.details_innen_box {
	flex: 1 1 calc(50% - 1rem); 
	}
	.details_innen_box_nach_fotobox {
	flex: 1 1 calc(50% - 1rem); 
	}
	/* Fotobox bekommt 50% Breite  */
	.details_innen_box_fotos { 
	flex: 1 1 calc(50% - 1rem); 
	}
}

@media only screen and (max-height: 700px) {
	.kacheln_card {
		min-height: 100px;
	}
}

@media (max-width: 600px) {
	/* 1 Box pro Zeile bei Smartphone */
	.details_innen_box {
	flex: 1 1 100%; 
	}
}

@media only screen and (max-height: 500px), (max-width: 500px) {
	nav {
		margin: 0;
	}

	nav li {
  		padding-left: 0px;
		padding-right: 10px;
	}
	
	.galerie_main-image-container {
	  max-height: calc(100vh - 20px);
	}
	
	#galerie_Layer {
		padding: 0px;
	}

	.galerie_close-btn {
		top: 10px; 
		right: 5px;
	}

	.galerie_pfeil.links  { 
		left: 5px; 
	}
	
	.galerie_pfeil.rechts { 
		right: 5px; 
	}

	#galerie_thumbnailWrapper {
		display: none !important;
	}

	.galerie_bild-zaehler {
		display: block;
	}
}

@media only screen and (max-width: 500px){
	.div_inhalt_1 {
		padding-left: 5px;
		padding-right: 5px;
	}

	.div_inhalt_2 {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.span_foto{
		display: box;
	}

	.span_klick{
		display: box;
	}
	
	footer a {
		font-size: 0.9rem;
	}
}


@media only screen and (max-width: 360px){
	.div_ueberschriften {
		padding-left: 4px;
		padding-right: 4px;
		font-size: 1rem;
		font-weight: 400;
	}

    .span_mitte_ueberschriften .result_info {
		font-size: 0.7rem;
		width: 106px;
    }

	.limitForm_text {
		font-size: 0.8rem;
	}
	
	footer a {
		font-size: 0.8rem;
	}
}

@media only screen and (max-width: 660px){
    .tabelle_tier_liste {
		display: inline-block;
    }
	
    .tabelle_tier_liste_rechts {
		grid-template-columns: auto auto auto 90px; /* 4 Spalten */
		width: 100%;
		min-width: 320px;
    }
	
	.pagination {
		gap: 1px; 
      	padding-top: 3px;
	}

	.pagination button {
      	padding: 4px 6px;
		margin: 2px;
		font-size: 0.8rem;
	}
	
	.pagination_wz {
		gap: 5px;           
      	padding-top: 3px;
      	padding-bottom: 3px;
	}

	.pagination_wz button {
      	padding: 2px 4px;
		margin: 2px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 0.8rem;
	}
	
	.seitenzahl_button {
      	padding: 4px 6px;
		margin: 2px;
		font-size: 0.8rem;
	}

	.aktuelle_seitenzahl {
      	padding: 4px 8px;
		margin: 2px;
		font-size: 0.9rem;
	}

	.zurueck_weiter_button {
      	padding: 4px 6px;
		margin: 0;
		font-size: 0.8rem;
	}

	.blinder_zurueck_weiter_button {
      	padding: 4px 6px;
		margin: 0;
		font-size: 0.8rem;
		opacity: 0.7;
	}

	.pagination .dots {
		padding: 6px 0px;
		font-size: 0.8rem;
	}
}

@media only screen and (orientation:landscape){
	.videobox{
		height: 75vh;
		width: auto;
		max-width: 800px;
	}

	.aufnahmebereich{
		/*display:none;*/
		display:none;
		width: 1200;
		height: 600;
	}
}

@media only screen and (orientation:portrait){
	.videobox{
		height: auto;
		width: 70vh;
		max-width: 70vw;
	}

	.aufnahmebereich{
		display:none;
		width: 1200;
		height: 600;
	}
}