/*
 *  MichaelHamann.org, Fachinformatiker Anwendungsentwicklung
 * 
 *  PHP Version 8
 * 
 *  Author:               Michael Hamann [KaMi] (info@michaelhamann.org)
 *  ------
 *  Created Date:         Tuesday April 15th 2025
 *  Last Modified:        Tuesday April 15th 2025 06:19:13
 *  ------
 *  Copyright:            2006 - 2025 michaelhamann.org
 *  Lizenz:               https://www.michaelhamann.org/license.txt
 *  Link:                 https://www.michaelhamann.org
 * 
 * 
 */

/* Anleitungsinhalt als DIV */
.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px;
  background-color: var(--divs-background);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  font-family: 'Courier New', monospace;
  max-width: var(--content-width);
}

.system-column {
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 6px;
}

.system-column h3 {
  color: #4da6ff;
  margin-bottom: 10px;
  font-size: 1.2em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
}

.system-column ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.system-column li {
  margin-bottom: 6px;
}

.system-column a {
  color: #4da6ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.system-column a:hover {
  color: #80cfff;
  text-decoration: underline;
}

/* Anleitungsinhalt als TABLE */
.system-table {
    width: 100%;    
    margin: 10px auto;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

.system-table th {
    /*background: rgba(255, 255, 255, 0.05);*/
    color: #ffffff;
    text-align: left;
    padding: 12px 16px;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 25%;
}

.system-table td {
    color: #ddd;
    padding: 12px 16px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.system-table ul {
    padding-left: 20px;
    margin: 0;
}

.system-table li {
    margin-bottom: 6px;
}

.system-table tr:last-child td {
    border-bottom: none;
}

.system-table a {
    color: #4da6ff;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.system-table a:hover {
    color: #80cfff;
    text-decoration: underline;
}

.system-table a:visited {
    color: #4da6ff;
}

.system-table a:active {
    color: #4da6ff;
}