@charset "utf-8";

/* Grundlayout */
body {
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
  background-color: #f5f7fa;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Container */
#all {
  width: 1700px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 20px;
}

h2 {font-size: 16px; font-weight: 600;}

/* Logo */
#logo {
  margin-bottom: 20px;
}

/* Navigation */
#nav {
  background-color: #1f2937;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 25px;
  font-size: 14px;
}
#nav a {
  color: #10b981;
  font-weight: 600;
  text-decoration: none;
  margin-right: 4px;
  transition: color 0.2s;
}
#nav a:hover {
  color: #34d399;
}

/* Inhalt */
#content {
  padding: 0px 0;
}

/*.schriftgruen{
	color: #10b981;
	font-weight: 500;
}*/
.tablehead{
	color: #10b981;
	font-weight: 500;
}
.tablehead td{
	font-weight: 500;
}
.tablehead th{
	padding: 4px;
}
.langesfeld {width: 200px !important;}

/* Header-Bereich */
#head_left {
  width: 50%;
  float: left;
}
#head_right {
  width: 45%;
  float: right;
  padding-top: 20px;
  text-align: right;
}

/* Formulareingaben */
#searchform input,
#mailschicken input,
#loginform input {
  font-size: 14px;
  padding: 10px;
  
  border: 1px solid #ccc;
  border-radius: 4px;
}
#loginform {
  margin: 30px auto;
  text-align: center;
}

/* Dashboard-Top-Bereich */
#ds_top_left {
  width: 30%;
  float: left;
}
#ds_top_middle {
  width: 70%;
  float: left;
  padding-top: 15px;
  margin-bottom: 10px;
}
#ds_top_right {
  width: 0%;
  float: right;
  text-align: right;
  font-size: 25px;
  color: #ef4444;
}

.kommentator {font-style: italic; font-size: 12px; text-decoration: underline;}
.metaleiste {font-size: 12px;}
.antwort {font-size: 13px; font-weight: bolder;}

/* Tabellen */
.font-bigger,
.font-smaller {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}
.font-bigger td,
.font-smaller td {
  border: 1px solid #e5e7eb;
  padding: 8px;
  font-size: 12px;
}
.font-bigger td {
  font-size: 14px;
}
.font-smaller a {
  color: #2563eb;
  text-decoration: none;
}

/* Eingeloggt-Box */
#eingeloggt {
  width: 280px;
  float: right;
}

/* Farben & Buttons */
.bg_red {
  background-color: #fecaca;
  padding: 8px;
  border-radius: 4px;
}

.bordergreenbottom {
  border-bottom: 3px solid #1f2937;
  margin-bottom: 15px;
}
.bordergreenbottom h2 {
  display: inline;
  font-weight: 500; 
  font-size: 17px;
}

.greenbutton {
  background-color: #10b981;
  color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.greenbutton:hover {
  background-color: #059669;
}

.redbg {
  background-color: #ef4444;
  color: #fff;
  font-weight: bold;
  padding: 6px;
  border-radius: 4px;
}
.greenbg {
  background-color: #10b981;
  color: #fff;
  font-weight: bold;
  padding: 6px;
  border-radius: 4px;
}

.verzeichnis {font-size: 17px; color: #333; }
.verzeichnis a{color: #333; }

.profilbild {float: left; display: block; width: 50px; border-radius: 50%; margin-right: 7px;}

/* Clearfix */
.clear {
  clear: both;
  height: 0;
  line-height: 0;
}

/*UPLOAD + DATEIVERLAUF! */

    #con-bottom table { border-collapse: collapse; width: 100%; margin-top: 20px; }
    #con-bottom th, #con-bottom td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    #con-bottom th { background-color: #1f2937; cursor: pointer; color: #10b981;}
    #con-bottom input[type="date"], input[type="text"] { width: 150px; }
    #con-bottom form { margin: 0; }


    #con-bottom #drop-area {
      border: 2px dashed #ccc;
      padding: 20px;
      width: 100%;
      max-width: 600px;
      margin: 20px auto;
      text-align: center;
    }
    #con-bottom #drop-area.hover {
      background-color: #f0f0f0;
    }
    #con-bottom #file-input {
      display: none;
    }
    #con-bottom #file-name {
      margin-top: 10px;
    }
    #con-bottom button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    #con-bottom button:hover {
      background-color: #45a049;
    }
	
	
	/*Neukunde anlegen Formular*/
.formular-versicherungsdaten {
  background: #f3f4f6;
  padding: 2rem;
  border-radius: 12px;
  font-family: 'Segoe UI', sans-serif;
  color: #1f2937;
  font-size: 0.9rem;
  margin: 0 auto;
  max-width: 1200px;
}

.formular-versicherungsdaten h2 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #10b981;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.formular-versicherungsdaten .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.formular-versicherungsdaten label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #374151;
  font-size: 0.88rem;
  position: relative;
  padding-left: 0.25rem;
}

.formular-versicherungsdaten label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: #10b981;
  opacity: 0.2;
}

.formular-versicherungsdaten input[type="text"],
.formular-versicherungsdaten select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.formular-versicherungsdaten input[type="text"]:focus,
.formular-versicherungsdaten select:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  outline: none;
}

.formular-versicherungsdaten input[type="submit"] {
  background-color: #10b981;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 1rem;
}

.formular-versicherungsdaten input[type="submit"]:hover {
  background-color: #0e9e6e;
}

.vertragsliste a {color: #000; text-decoration: none;}
.vertragsliste:hover {background-color: #eee;}
.aufgabenliste:hover {background-color: #eee;}
.aufgabenliste {font-size: 14px;}
.aufgabenliste_tabelle td {border-bottom: 1px solid #ddd; padding: 5px;}
.redbutton {
  background-color: darkred;
  color: white;
  border: none;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

.redbutton:hover {
  background-color: red;
}

#autoGrowTextarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  font-size: 16px;
  resize: none; /* verhindert manuelles Ziehen */
  box-sizing: border-box;
  overflow: hidden; /* wichtig für sauberes Wachstum */
}

/*CHAT */
.flyout-container {
      position: fixed;
      top: 100px;
      right: -260px;
      width: 290px;
      height: 600px;
      background-color: #10b981;
      color: white;
      padding: 20px; padding-right: 40px;
      border-radius: 8px 0 0 8px;
      transition: right 0.3s ease;
      z-index: 1000;
	  overflow: auto;
    }

    .flyout-container.open {
      right: 0;
    }

    .flyout-container:hover {
      right: 0;
    }
	
.white-line {
  border: none;
  height: 1px;              /* Dicke der Linie */
  background-color: white;  /* Farbe */
  margin: 10px 0;           /* Abstand oben/unten */
}