/* ==================================== */ /* 1. CSS Variablen (Farben)            */ /* ==================================== */ :root { --color-bg-card: #2c2c2c;          /* Dunkles Anthrazit für den Hintergrund */ --color-text-light: #f0f0f0;       /* Helle Schriftfarbe */ --color-text-muted: #a0a0a0;       /* Gedämpftes Grau für Labels */ --color-border: #444444;           /* Dunkle Trennlinie */ --color-primary-accent: #64b5f6;   /* Akzentfarbe (z.B. für RAM-Werte) */ } /* ==================================== */ /* 3. Key-Value-Paare definieren        */ /* ==================================== */ /* Der erste TD ist das Label (Key) */ .kinfo tr td:first-child { font-size: 0.9rem; color: var(--color-text-muted); /* Gedämpfte Farbe */ font-weight: 500; text-transform: uppercase; flex-grow: 1; /* Nimmt verfügbaren Platz ein */ } /* Der zweite TD ist der Wert (Value) */ .kinfo tr td:last-child { font-size: 1.1rem; font-weight: 600; color: var(--color-text-light); /* Helle, klare Farbe */ text-align: right; white-space: nowrap; /* Verhindert Zeilenumbruch bei Werten */ } /* === Spezielle Hervorhebungen (z.B. RAM-Wert) === */ /* Da keine spezifische Klasse im HTML ist, verwenden wir :nth-child(6) für die RAM-Zeile */ .kinfo tr:nth-child(6) td:last-child { color: var(--color-primary-accent); /* Hebt den Wert hervor */ font-weight: 700; } /* Styling für das OS-Icon */ .kinfo tr td img { vertical-align: middle; margin-right: 5px; } /* ==================================== */ /* 2. Tabelle als Card stylen (.kinfo)  */ /* ==================================== */ .kinfo { /* ... (andere Stile wie display: block, width, padding etc.) ... */ display: block; width: auto; border-collapse: collapse; margin-top: 20px; background-color: var(--color-bg-card);  color: var(--color-text-light);  padding: 20px; border-radius: 8px; border: 1px solid var(--color-border); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  } /* Tabellenzeile als Flex-Container */ .kinfo tr { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .kinfo tr:last-child { border-bottom: none; } /* ==================================== */ /* Korrektur für die Tabellenbreite (.kinfo) */ /* ==================================== */ .kinfo { /* Setzt die Tabelle auf 50% der Breite des Elternelements (#content) */ width: 100%;  /* ... (andere Stile) ... */ display: block; border-collapse: collapse; margin-top: 20px; background-color: var(--color-bg-card);  color: var(--color-text-light);  padding: 20px; border-radius: 8px; border: 1px solid var(--color-border); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  } /* Optional: Zentriert die Tabelle in der Mitte des #content-Bereichs */ .kinfo { margin-left: auto; margin-right: auto; /* Behält den margin-top bei */ margin-top: 20px;  } .kinfo td { width:50%; } /* Die Zellen (td) teilen weiterhin die 50% der Tabellenbreite unter sich auf */ .kinfo tr { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .kinfo tr td:first-child, .kinfo tr td:last-child { /* Stellt sicher, dass die Zellen die 50% Tabellenbreite gleichmäßig aufteilen */ flex-basis: 50%; flex-grow: 1; }