/* /*********************************************************** */
* ROFEL Farben
* orange : 255,150,0
* grün : 110,180,0
***********************************************************/
/***********************************************************
* Fonts z.Z. verwendet
***********************************************************/
@font-face {
    font-family: 'regular';
    src: url('./fonts/ubuntu-r-webfont.woff');
}
@font-face {
    font-family: 'medium';
    src: url('./fonts/ubuntu-m-webfont.woff');
}
@font-face {
    font-family: 'bold';
    src: url('./fonts/ubuntu-b-webfont.woff');
}

/***********************************************************
* Fonts z.Z. nicht verwendet
***********************************************************/
/*
@font-face {
    font-family: 'condensed';
    src: url('./fonts/ubuntu-c-webfont.woff');
}
@font-face {
    font-family: 'lightitalic';
    src: url('./fonts/ubuntu-lightitalic-webfont.woff');
}
@font-face {
    font-family: 'italic';
    src: url('./fonts/ubuntu-italic-webfont.woff');
}
@font-face {
    font-family: 'mediumitalic';
    src: url('./fonts/ubuntu-mediumitalic-webfont.woff');
}
@font-face {
    font-family: 'bolditalic';
    src: url('./fonts/ubuntu-bolditalic-webfont.woff');
}
@font-face {
    font-family: 'mono';
    src: url('./fonts/ubuntumono-regular-webfont.woff');
}
*/

/***********************************************************
* allgemein
***********************************************************/
html {
	height:100%;
}
body {
	margin:0;
	padding:0;
	font-family:'regular', sans-serif;
	font-size: 1.0em;
    color: #fbf4e9;
    overflow-x: hidden;
    overflow-y: auto;
	position:relative;
	height:100%;
	top: 0;
	background-color: #181a1b;
    background-image: url(./bg.png);
    background-position: center top;
    background-size: 50% auto;
    background-repeat: no-repeat;
    
}
.cssdesign{
border-left: 10px solid #666666;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
background-color: #FFCC00;
color: #666;
}
h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	padding-bottom: 4px;
}
h1 {
	font-size: 1.5em;
	font-family:'bold', sans-serif;
    color: #fbf4e9;
}
h2 {
	font-size: 1.3em;
	font-family:'bold', sans-serif;
    color: #fbf4e9;
}
h3 {
	font-size: 1.3em;
	font-family:'medium', sans-serif;
}
h4 {
	font-size: 1.1em;
	font-family:'medium', sans-serif;
}
a {
   color: rgba(239,141,0,1.0);
   text-decoration: none;
}
a:hover,
a:active,
a:focus {
   outline:none;
   color: rgba(110,180,0,1.0);
}
a:visited {
   outline:none;
   color: rgba(110,180,0,1.0);
}
a,
div {
  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
          box-sizing: border-box;
}
p {
	margin: 0 0 10px 0;
	padding: 0;
}
p.klein {
	font-size: 0.7em;
	margin: 0 0 0px 0;
	padding: 0;
}
table {
	border-collapse: collapse;
}
img {
	max-width: 100%;
	margin: 0;
/*	padding-left: 10%;
	padding-top: 1%
*/
}
img {
  border-radius: 1%;
  border:2px solid #000000;
  border-color: #687752;
  }
  
/**************************************************
* linkliste design
* ************************************************/
.listeli1 {
  color: green;
  background-color: rgba(255,150,0,0.02);;
 }
.listeli2 {
  color: rgb(92, 125, 255);
  background-color: rgba(255,150,0,0.02);;
 }
.listeli3 {
  color: red;
  background-color: rgba(255,150,0,0.02);;
 }
.listeli4 {
  color: yellow;
  background-color: rgba(255,150,0,0.02);;
 }
.listeli5 {
  color: grey;
  background-color: rgba(255,150,0,0.02);;
 }
.listeli6 {
  color: violet;
  background-color: rgba(255,150,0,0.02);;
 }
.listeli7 {
  color: white;
  background-color: rgba(255,150,0,0.02);;
 }




/**************************************************
* text design
* ************************************************/
p.box-orange {
	padding: 12px 20px;
   color: rgba(0,0,0,1.0);
   background-color: rgba(255,150,0,0.5);
   border-radius: 3px;
}
p.box-gruen {
	padding: 12px 20px;
   color: rgba(0,0,0,1.0);
   background-color: rgba(156,255,0,0.15);
   border-radius: 3px;
}
p.kod {
	font-family:'mono', sans-serif;
   color: rgb(110, 180, 0);
}
span.wichtig {
	font-family:'bold', sans-serif;
   color: rgba(0,0,0,1.0);
}

.text-select {
   -webkit-user-select:text;
   -moz-user-select:text;
   -ms-user-select:text;
   user-select:text;
}
.text-nonselect {
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
}
video {
   max-width:100%;
}

/**************************************************
* Breite
* ************************************************/
div.kopf-in,
div.textmenu-in,
div.bildmenu-in {
   flex-basis: 1000px;
}
/**************************************************
* Kopf
* ************************************************/
div.kopf {
	font-family:'medium', sans-serif;
}
div.kopf-in {
}
div.kopf-in a {
   border-radius: 3px;
}

div.kopf-titel {
	font-size: 2em;
}
div.kopf-titel a {
	padding: 10px 20px;
   color: rgba(110,180,0,1.0);
}
div.kopf-titel a:hover,
div.kopf-titel a:active,
div.kopf-titel a:focus{
   color: rgba(110,180,0,1.0);
}

div.kopf-menu {
	font-size: 1.2em;
	padding: 0 8px 4px 8px;
}
div.kopf-menu a {
	padding: 8px 12px;
   color: rgba(110,180,0,1.0);
}
div.kopf-menu a:hover,
div.kopf-menu a:active,
div.kopf-menu a:focus {
   color: rgba(255,150,0,1.0);
   background-color: rgba(0,0,0,0.04);
}

/**************************************************
* Bauch
* ************************************************/
div.bauch {
}
/**************************************************
* Bauch Text Menü
* ************************************************/
div.textmenu {
}
div.textmenu-in {
}
a.textmenu-prev {
}
div.textmenu-mid {
   text-align: center;
}
a.textmenu-next {
}
div.textmenu a {
	padding: 4px 20px;
	font-size: 1.4em;
	font-family:'bold', sans-serif;
   color: rgb(92, 125, 255);
   border-radius: 3px;
}
div.textmenu a:hover,
div.textmenu a:active,
div.textmenu a:focus {
   color: rgba(255,150,0,1.0);
   background-color: rgba(0,0,0,0.04);
}
/**************************************************
* Bauch Text
* ************************************************/
div.text {
}
div.text-in {
   flex-basis: 1000px;
	padding: 10px 20px 30px 20px;
}
/**************************************************
* Bauch Text Boxen
* ************************************************/
div.textbox {
}
div.textbox-in {
   flex-basis: 1000px;
	padding:  0 50px 0 0px;
    float: left;
}

div.linkbox-in {
     float: right;
     width: 20%;
     margin-right: 3.33333%;
     padding: 20px;
     background: #3b3b3b;
     box-sizing: border-box;
}

div.linkbox-right {
     margin-right: 0;
}

linksammlung {
	display: flex;
  flex-wrap: wrap;
}

linkteil,
aside {
	padding: 5px;
	-webkit-flex: 3 1 0%;
	flex: 3 1 0%;
  min-width: 200px;
}





/**************************************************
* Bauch Bild Menü
* ************************************************/
div.bildmenu {
   color: rgba(255,255,255,1.0);
   background-color: rgba(0,0,0,0.6);
}
div.bildmenu-in {
}
a.bildmenu-prev {
}
div.bildmenu-mid {
	padding: 10px 12px;
   text-align: center;
   vertical-align: middle;
}
a.bildmenu-next {
}
div.bildmenu a {
	padding: 4px 20px;
	font-size: 1.4em;
	font-family:'bold', sans-serif;
   color: rgba(255,255,255,0.8);
   border-radius: 3px;
}
div.bildmenu a:hover,
div.bildmenu a:active,
div.bildmenu a:focus {
   color: rgba(255,210,98,1.0);
   background-color: rgba(255,255,255,0.00);
}
/**************************************************
* Bauch Bild
* ************************************************/
div.bild {
   color: rgba(255,255,255,1.0);
   background-color: rgba(0,0,0,0.8);
}
div.bild-in {
}
div.bauch-bild-in img {
   display: block;
}

/**************************************************
* Flex
* ************************************************/
.container-col {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
			  flex-direction: column;
}
.container-row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
			  flex-direction: row;
}
.wrap {
   -webkit-flex-wrap: wrap;
			  flex-wrap: wrap;
}
.item-flex-11auto {
	-webkit-flex: 1 1 auto;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
}
.item-flex-01auto {
	-webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	        flex: 0 1 auto;
}
.item-flex-10auto {
	-webkit-flex: 1 0 auto;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
}
.item-flex-00auto {
	-webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}
.flex-jc-center {
	-webkit-justify-content: center;
			  justify-content: center;
}
.flex-jc-end {
	-webkit-justify-content: flex-end;
			  justify-content: flex-end;
}
.flex-ac-end {
	-webkit-align-content: flex-end;
			  align-content: flex-end;
}

#ifrm1 {
  opacity: 0;
  transition: opacity 1.5s linear;
}
#trig1:hover + iframe {
  opacity: 1;
  transition: opacity 1.5s linear;
}

#############################
##### neue Generation seitenersteller


.image-container {
    width: 100%;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert Überlauf beim Skalieren */
}
.image-container:hover {
    transform: scale(1.03);
}
.image-container img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}
        .text-content {
            background: #101112;
            padding: 0px;
            margin: 0px 0;
            border-radius: 4px;
        }
        .custom-link {
            display: inline-block;
            margin: 0px 0;
            padding: 2px 2px;
            background: rgba(92, 125, 255, 0.1); /* #5c7dff mit 20% Deckkraft */
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        .custom-link:hover {
            background: #5c7dff;
        }
        .manual-text {
            background: #101112;
            font-size: 1.2em;
            padding: 0px;
            margin: 0px 0;
            border-radius: 0px;
        }

###############
.image-container {
    width: 100%;
    height: 300px; /* Feste Höhe (optional) */
    overflow: hidden; /* Schneidet Überlauf ab */
}

.image-container img {
    border-radius: 1%;
    border: 2px solid #ccc; /* Grauer Rahmen - Farbe nach Bedarf anpassen */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt den Container, ohne zu verzerren */
    object-position: center; /* Zentriert das Bild */
}