/* ------------------------------------------------------------------------------------------ *
 * Name       : ortsgruppen.css                                                                              * 
 * Description: Style für ortsgruppen.php                                                                *
 * created    : 12.May.2026                                                                                   *
 * Version    : 1.0.0                                                                                             *
 * ******************************************************************** */
 
/* ----------------------------------------------------------------------- */
/* ------------------------------- Wrapper ------------------------------ */
/* ----------------------------------------------------------------------- */
 .wrapper-box-ortsgruppen {
     display: flex;
    flex-direction: row;
    gap: 20px;
    height: calc(64vh - 4px);
    max-height: calc(70vh - 4px);
    max-width: 100%;
    width: 100%;
    margin-left: 10px;
    margin-top: 4px;
    background-color: white;
    padding: 25px;
    border-radius: 1px;
    box-shadow: 5px 5px 10px #0c32a5;
    box-sizing: border-box;
    overflow: hidden;
 }
 .wrapper-box-ortsgruppen h2 {
    font-size: 12pt;
    font-weight: bold;
    color: #000000;
    text-shadow: 2px 2px 4px #9a9a9a;
}
 
/* ----------------------------------------------------------------------- */
/* -------------------- Rechter Teil Detail ------------------------------ */
/* ----------------------------------------------------------------------- */
 .ortsgruppen-right-box-section {
    flex: 1;
    min-width: 280px;
    max-width: 50%;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
	margin-top: -12px;
      
}

ortsgruppen-right-box-section h2{
	margin: 0 0 10px 0;
    color: black;
    font-size: 18px;
}
  
.details-header-ortsgruppen{
	margin-top: 0;
    color: var(--primary);
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.no-data-ortsgruppen {
    color: var(--text-light);
    font-style: italic;
} 

.contact-card {
    background: #fff;
    border-left: 4px solid #3498db;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
	min-height: 400px;
	margin-top: 10px;
	display:flex;
}
.contact-card-detail{
	width: 96%;
	background: #ffffff;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
	min-height: 400px;
	margin-top: 10px;	
}
.foto-border{
	
}
.contact-card-passfoto{
	
}
.ortsgruppen-right-box-section img {
  max-width: 162px;
  min-width: 152px;
  height: auto;
  margin: 0 15px 15px 0;
  object-fit: cover;
  border: 1px solid #666;
  box-shadow: 5px 5px 10px #b1b1b1;
  display: block;
  cursor: pointer;
  /*background: url(../bitmaps/shadow/schatten-white195px.png) no-repeat bottom left;*/
  display: block;
  /*margin: 0 auto;*/
  min-height: 184px;
}
.ortsgruppen-right-box-section h3{
	margin: 0 0 10px 0;
	font-size: 18px;
	color: black;
	font-weight: bold;
}
.ortsgruppen-right-box-section h4{
	margin: 0 0 10px 0;
	font-size: 22px;
	font-weight: normal;
	color: black;
	
}

.ortsgruppen-right-box-section p{
margin: 0;
  font-size: 15px;
  line-height: 1.3;
}
/* ----------------------------------------------------------------------- */
/* ------------- Linker Teil Auswahlbereich ------------------------------ */
/* ----------------------------------------------------------------------- */
 .ortsgruppen-left-box {
	/*! flex: 1; */
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-right: 20px;
	border-right: 1px solid #ddd;
	overflow-y: auto;   
	width: 688px;
	margin-top: 4px;
  }
 
 .box-liste-ortsgruppen{
	/*! background-color: #ffdfb9; */
	padding: 0px;
      /*! border-radius: 4px; */
      margin-bottom: 7px;
      /*! display: flex; */
      gap: 10px;
      /*! align-items: center; */
      height: 100%;
      width: 100%;
	border-top: 1px solid gray;
}


.daten-tabelle {
	width: 100%;  
  /*! border-collapse: collapse; */ /* Rahmen doppelt vermeiden */
  margin: 8px 0;        /* Abstand oben/unten */
  /*! font-family: Arial, sans-serif; */
  font-size: 14px;
  /*! color:black; */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  /*! border-radius: 8px; */    /* Abgerundete Ecken (wirkt nur auf den Container) */
  /*! overflow: hidden; */      /* Damit Ecken beim Header/Tbody nicht überstehen */
}

/* Header (Kopfzeile) */
.daten-tabelle thead tr {
  background-color: #abc9f1; 
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}
.col-id{
	width: 60px;  
	text-align: center;
	/*! max-width: 20px; */
}
.col-org{
	width: 25px;  
	text-align: center;
}
.col-funk{
	width: 169px;  
	text-align: center;
	/*! max-width: 34px; */
}

.col-og{
	width: 193px;  
	text-align: center;
    /*! max-width: 39px; */
}

.col-vn{
	/*! min-width: 43px; */  
	width: 159px;  
	/*! text-align: center; */
	/*! max-width: 17px; */
}
.col-nn{
	width: 212px;  
	/*! text-align: center; */
}

/* Zellen allgemein (Header & Body) */
.daten-tabelle th, 
.daten-tabelle td {
  padding: 8px 8px;    /* Innenabstand für Luftigkeit */
  border-bottom: 1px solid #dddddd;
  color: black;
}

/* Gestreifte Zeilen (Zebra-Look) für bessere Lesbarkeit */
.daten-tabelle tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

/* Letzte Linie unten entfernen */
.daten-tabelle tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

/* Hover-Effekt: Zeile hervorheben bei Mauszeiger */
.daten-tabelle tbody tr:hover {
  background-color: #ffc802; /* Helles Blau/Cyan beim Drüberfahren */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

 

/* *********************************** *
 * einzelne Karteikarten               *
 * *********************************** */

/* Child Container */
.child-news {
    width: 432px;
    height: 643px;
    background-color: #ffffff;

    border: 0.5px solid #333;
    box-shadow: 5px 5px 10px #b1b1b1;

    flex-shrink: 0;
    box-sizing: border-box;
    padding: 15px;
}

/* Child Überschrift */
.child-news h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
}

/* Child Text */
.child-news p {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}
/* Bild links, Textumfluss rechts + unten */
.child-news img {
    width: 180px;
    height: 140px;

    float: left;
    margin: 0 15px 15px 0;

    object-fit: cover;
    border: 1px solid #666;
     box-shadow: 5px 5px 10px #b1b1b1;
    cursor: pointer;
          
    /*background: url(../bitmaps/shadow/schatten-white195px.png) no-repeat bottom left;*/
}