:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --accent:#2563eb;
  --muted:#6b7280;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin: 0;
}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#111827;
  display:flex;
  min-height: 100vh; /* immer mindestens Bildschirmhöhe */
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0; /* dehnt bis ganz unten */
  width: 260px;

  background: linear-gradient(225deg, rgba(174,189,255,1), rgba(100,192,200,1));
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(15,23,42,0.1);
  z-index: 1001;
}
.sidebar img{
  width:100%;
  height:auto;
  border-bottom:1px solid rgba(15,23,42,0.1);
  display:block;
}

nav{
  padding:1rem;
}
nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}
nav a{
  display:block;padding:.6rem .75rem;border-radius:8px;text-decoration:none;color:inherit;
  font-weight:500;
}
nav a:hover{background:rgba(37,99,235,0.06);color:var(--accent)}
nav a.active{background:var(--accent);color:white}

/* Grundmenü */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li {
  margin-bottom: 5px;
}

/* Untermenüs standardmäßig ausblenden */
.submenu {
  list-style: none;
  margin: 0;
  padding-left: 15px; /* etwas einrücken */
  display: none;      /* unsichtbar */
}

/* Untermenü anzeigen, wenn Maus über Elternpunkt geht */
.menu li:hover > .submenu {
  display: block;
}

/* Optional: Styling für Links */
.menu a {
  text-decoration: none;
  display: block;
  padding: 5px;
}
.menu a:hover {
  background-color: #ddd;
}

    
.main {
  margin-left: 260px; /* Platz für Sidebar */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header{
  padding:1rem;
  background:linear-gradient(90deg, rgba(174,189,255,1), rgba(100,192,200,1)); /* heller zu dunkler blau */
    /*background:linear-gradient(90deg, rgba(216,240,250,1), rgba(100,192,200,1));  heller zu dunkler blau */
/*background:linear-gradient(90deg, #93c5fd, #1e3a8a); /* heller zu dunkler blau */
  border-bottom:1px solid rgba(15,23,42,0.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

header h1{ 
  color:#fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
  margin:0; 
  font-size: 2.5rem;        /* Schriftgröße */
  line-height: 1.5;      /* relative Texthöhe (120% der Schriftgröße) */
}

.toggle-btn{
  display:none;
  background:none;
  border:0;
  font-size:1.2rem;
  cursor:pointer;
  padding:.5rem;
  border-radius:8px;
}

.content{
  padding:1.5rem;
}

footer{
  padding:1rem;
  border-top:1px solid rgba(15,23,42,0.1);
  text-align:center;
  color:var(--muted);
  background:#fafafa;
}

/* Overlay */
.overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
  z-index:1000;
}
.overlay.active{
  opacity:1;
  visibility:visible;
}

/* Responsive */

@media (max-width: 768px){
  body{flex-direction:column;}
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    transform:translateX(-100%); /* unsichtbar */
    transition: transform .3s ease-in-out;
  }
  .sidebar.open{
    transform:translateX(0);
  }
  /*.main{grid-template-rows:auto 1fr auto;}*/
  .main { margin-left: 0; } /* Inhalt nicht verschoben im mobilen Modus */
  .toggle-btn{display:inline-block;}
}

.highlight {
  background-color: #f0f8ff;
  color: #000080;
  padding: 2px 5px;
  border-radius: 4px;
}

img {
  max-width: 100%;   /* Bild wird nie breiter als der Container */
  height: auto;      /* Höhe passt sich proportional an */
  display: block;    /* verhindert kleine Abstände unter Bild */
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

/* Tabelle anpassen */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Zellen */
.styled-table th,
.styled-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.1);
  text-align: left;
}

/* Header fixieren */
.styled-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(90deg, rgba(174,189,255,1), rgba(100,192,200,1));
  color: white;
  z-index: 2;
}

/* Zebra-Effekt */
.styled-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Hover-Effekt */
.styled-table tbody tr:hover {
  background-color: #f0f8ff;
}

.person-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  /*background-color: #e0ffff;*/
  background: linear-gradient(225deg, rgba(174,189,255,1), rgba(100,192,200,1));
  border-radius: 8px;
  padding: 1rem;
  max-width: 530px;
  min-height: 120px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.person-photo img {
  width: 126px;
  height: 110px;
  object-fit: cover;
  border-radius: 4px;
}

.person-info {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.person-role {
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.person-name {
  margin: 0 0 0.5rem 0;
}

.person-email a {
  color: #2563eb;
  text-decoration: none;
}

.person-email a:hover {
  text-decoration: underline;
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich große Spalten */
  gap: 1rem;                      /* Abstand zwischen den Bildern */
}

.image-grid img {
  width: 100%;       /* passt in die Spalte */
  height: auto;      /* Seitenverhältnis bleibt erhalten */
  border-radius: 8px; /* optional: abgerundete Ecken */
}

/* Für kleine Bildschirme */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr; /* eine Spalte */
  }
}

.tr_blue td {
  color: blue;
}

.tr_red td {
  color: red;
  font-weight: bold;
}

.zentrieren {
  text-align: center;   /* Text mittig */
  margin: 2rem 0;       /* oben und unten 2rem Abstand, rechts/link */
}

.wichtig {
  background-color: #c62828;   /* dunkles Rot */
  color: #fff;                 /* weiße Schrift */
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: bold;
  margin: 15px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

address {
  font-style: normal;
  line-height: 1.5;
}