/* 




ACHTUNG :  bei veränderung IMMER version anpassen:

<link rel="stylesheet" href="/content.css?v=1">













===============================================================
 CONTENT.CSS - OPTIMIZED & DOCUMENTED VERSION
===============================================================
This stylesheet contains styles for a DPI/PPI calculator and image sizing tool.
Last updated: 16.04.2025
*/

/*
===============================================================
 TABLE OF CONTENTS
===============================================================
1. VARIABLES & BASE STYLES
   1.001 Custom Properties (CSS Variables)
   1.002 Base Typography

2. FORM ELEMENTS
   2.001 Common Input Styles
   2.002 Buttons
   2.003 Select Dropdowns
   2.004 Text Inputs
   2.005 File Inputs
   2.006 Custom file input styling
   2.007 Radio Buttons & Groups
   2.008 Radio button groups for units and dpi/ppi
   2.009 Rounded corners for first and last labels in groups
   2.010 Selected state for radio groups
   2.011 Hover state for radio group labels

3. LAYOUT COMPONENTS
   3.001 Flex Layouts
   3.002 PPI/DPI wrapper specific styles
   3.003 Navigation
   3.004 Input Rows with Units
   3.005 Result Boxes
   3.006 Upload Elements
   3.007 Delete Button

4. DATA VISUALIZATION
   4.001 Tables
   4.002 Table color variations
   4.003 Special element for color depth template
   4.004 Formula Blocks
   4.005 Info Tables
   4.006 Infowerte variation
   4.007 Calculation Blocks
   4.008 Pixel Block for visualization

5. DPI INFORMATION SECTION
   5.001 DPI Info Container
   5.002 DPI Content Typography
   5.003 DPI page specific styles
   5.004 DPI Tables

6. RESULTS & PREVIEW
   6.001 Results Container
   6.002 Image Preview Box
   6.003 Preview Image Styling
   6.004 Preview Info Section

7. RESPONSIVE STYLES
   7.001 Tablet (768px)
   7.002 Basic responsive adjustments
   7.003 Preview container adjustments
   7.004 Mobile (600px)
   7.005 Formula cards layout changes
   7.006 Responsive tables - simplified mobile version
   7.007 Small Mobile (350px)
===============================================================
*/

/* ===============================================================
   1. VARIABLES & BASE STYLES
   =============================================================== */

/* 1.001 Custom Properties (CSS Variables) */
:root {
  /* Colors */
  --primary-color: #1C64F2;
  --text-color: #333;
  --light-bg: #f9f9f9;
  --border-color: #ccc;
  --border-light: #eee;
  
  /* Semantic colors */
  --success-bg: #eaffea;
  --warning-bg: #fffde6;
  --primary-bg: #e6f4ff;
  --danger-bg: #e74c3c;
  --danger-dark: #c0392b;
  
  /* Spacing & sizing */
  --standard-radius: 4px;
  --standard-padding: 0.5rem;
  --standard-gap: 1rem;
}

/* 1.002 Base Typography */
body {
  line-height: 1.5;
  color: var(--text-color);
}

/* ===============================================================
   2. FORM ELEMENTS
   =============================================================== */

/* ===============================================================
   2. FORM ELEMENTS - CLEANED UP VERSION
   =============================================================== */

/* 2.001 Common Input Styles */
button, 
select, 
.upload-button {
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border: none;
  outline: none;
  height: 32px;
  display: flex;
  align-items: center;
}

/* 2.002 Buttons */
.delete-button {
  width: 100%;
  background: var(--danger-bg);
  color: #fff;
  border: none;
  padding: 0.4rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--standard-radius);
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.delete-button:hover {
  background: var(--danger-dark);
}

.upload-button {
  margin-left: auto;
  background: #eee;
  height: 32px;
  padding: 0 1rem;
  white-space: nowrap;
  justify-content: center;
}

/* 2.003 Select Dropdowns */
select, 
.flex-item select {
  width: 100%;
  height: 32px;
  padding: 0 0.8rem;
  line-height: 32px;
  box-sizing: border-box;
  background-color: #D8D8D8;
}

/* 2.004 Text Inputs */
input[type="text"] {
  border: none;
  outline: none;
  padding: 0.5rem;
  font-size: 1rem;
  background: transparent;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 2.005 File Inputs */
input[type="file"] {
  display: none;
}

/* 2.006 Custom file input styling */
label[for="image_input"] {
  display: inline-block;
  border: 0px solid #ccc;
  padding: 0.4rem 0.8rem;
  background: #eee;
  cursor: pointer;
}

/* 2.007 Hide radio button inputs */
input[type="radio"] {
  display: none;
}

/* ===============================================================
   Abschnitte 2.008 - 2.011: Segmented Control Radio Groups
   =============================================================== */
/* 2.008 General layout for segmented control groups */
.segmented-control-group {
  display: flex;
  width: 100%;
  font-size: 0; /* Eliminate whitespace gaps */
  background: #eee; /* Match label background color */
  border-radius: var(--standard-radius); /* Rounded corners for the whole group */
  overflow: hidden; /* Ensure content doesn't overflow rounded corners */
}

/* 2.008 Styling for labels within the group */
.segmented-control-group label {
  flex: 1 1 0;
  text-align: center;
  font-size: 1rem; /* Reset font size */
  margin: 0;
  padding: 0.6rem 0;
  background: #eee;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  user-select: none;
  display: block; /* Force block layout */
  /* Add these to ensure no gaps */
  min-width: 0; /* Prevent flex items from refusing to shrink */
}

/* Make sure this applies to the same wrapper */
#input_unit_group {
  background: #eee; /* Match label color */
}

/* 2.010 Selected state */
.segmented-control-group input[type="radio"]:checked + label {
  background: #000;
  color: #fff;
}

/* 2.011 Hover state */
.segmented-control-group label:hover {
  background-color: #fff2a8;
}

/* Checked state Hover */
.segmented-control-group input[type="radio"]:checked + label:hover {
  background-color: #000;
}

/* Keep width for original groups */
#input_unit_group,
#input_dpi_ppi_group {
  width: 100%;
}

/* Specialized version for ratio mode group that should be compact */
#input_ratio_mode_group.segmented-control-group {
  width: auto; /* Override the 100% width */
  flex: 0 0 auto; /* Don't grow, don't shrink, size to content */
  display: inline-flex; /* Use inline-flex to only take needed space */
}

#input_ratio_mode_group.segmented-control-group label {
  padding-left: 0.8rem; /* Add some horizontal padding for better appearance */
  padding-right: 0.8rem;
  white-space: nowrap; /* Prevent text wrapping */
}









/* ===============================================================
   3. LAYOUT COMPONENTS
   =============================================================== */

/* 3.001 Flex Layouts */
.flex-row, 
.ppi-dpi-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--standard-gap);
  margin-bottom: var(--standard-gap);
}

.flex-item, 
.calc-block, 
.ppi-dpi-wrapper > div {
  flex: 1 1 0;
  min-width: 250px;
  box-sizing: border-box;
}

/* 3.002 PPI/DPI wrapper specific styles */
.ppi-dpi-wrapper > .ppi-block {
  padding: 0 10px;
  border-right: 1px solid var(--border-color);
}

.ppi-dpi-wrapper > .dpi-block {
  padding: 0 10px;
}

/* 3.003 Navigation */
.section-nav {
  margin: 1rem 0 1.5rem 0;
  padding-bottom: 0.8rem;
  justify-content: flex-start;
  gap: 1.5rem;
}

.section-nav .nav-item {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  padding: 0.3rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
  flex: 0 0 auto;
}

.section-nav .nav-item:hover {
  border-bottom: 2px solid var(--primary-color);
}

/* 3.004 Input Rows with Units */
.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  max-width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--standard-radius);
  overflow: hidden;
  background: #fff;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.input-row input[type="text"] {
  flex: 1 1 auto;
}

.unit-label {
  padding: 0.5rem;
  background: #eee;
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 3.005 Result Boxes */
.result-box {
  flex: 1 1 0;
  padding: 0.5rem;
  border-radius: var(--standard-radius);
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
}

.result-pixel {
  background-color: var(--primary-bg);
}

.result-mm {
  background-color: var(--success-bg);
}

.result-dpi {
  background-color: var(--warning-bg);
}

/* 3.006 Upload Elements */
.upload-box {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--standard-radius);
  background: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

.upload-spacer {
  flex: 1;
  padding-left: 5px;
}

/* 3.007 Delete Button */
/* Already defined in section 2.2 */


/* 3.007.1 Title row for calculation blocks */
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

/* 3.007.2 Left part (block title) */
.title-row strong {
  flex: 0 0 auto;
}



/* 3.007.3 Right part (ratio constraint display) - Updated */
.ratio-constraint-display {
  display: none; /* Initially hidden */
  flex: 0 0 auto;
  margin-left: auto; /* Pushes it all the way to the right */
  font-size: 0.9rem;
  color: #555;
  background-color: #f8f9fa;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #e9ecef;
  white-space: nowrap; /* Prevents line breaks within the display */
  cursor: pointer; /* Make entire box clickable */
  align-items: center; /* Vertically center content */
  height: 24px; /* Fixed height for consistent alignment */
  box-sizing: border-box;
}

/* Make ratio value bold */
.active-ratio-value {
  font-weight: bold;
  color: #8a2be2; /* Violet color */
}

/* 3.007.4 The "x" button for removing the constraint - Updated with gray background */
.ratio-constraint-remove-inline {
  background-color: #e0e0e0; /* Gray background */
  border: none;
  color: #555;
  font-weight: bold;
  cursor: pointer;
  padding: 0 6px;
  margin-left: 5px;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
  border-radius: 3px;
  height: 18px; /* Fixed height */
  display: inline-flex;
  align-items: center; /* Center the X vertically */
  justify-content: center;
}

/* 3.007.5 Hover effect for the entire box */
.ratio-constraint-display:hover .ratio-constraint-remove-inline {
  background-color: #d9534f; /* Red background on hover */
  color: white; /* Better contrast */
}

/* Ensure all text is vertically centered */
.given-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
}






/* ===============================================================
   3.008 Neue Ratio Control Styles (Fokus auf Hauptstruktur)
   =============================================================== */

/* Hauptcontainer für Ratio-Controls UND Info-Link */
#ratio_control_container {
  display: flex;         /* Direkte Kinder nebeneinander */
  align-items: center;   /* Vertikal zentrieren */
  gap: 0.5rem;         /* Etwas mehr Abstand zwischen Modus-Block und Info-Link */
  flex-wrap: nowrap;     /* KEIN Umbruch der direkten Kinder! */
  /* width: auto; */    /* Breite soll sich nach Inhalt richten */
  /* Keine width: 100% hier! */
}

/* -- Styling für die Elemente INNERHALB der Modus-Blöcke -- */

/* Basis-Styling für beide Modus-Container */
#ratio_input_mode,
#ratio_given_mode {
  display: flex;         /* Interne Elemente auch nebeneinander */
  align-items: center;   /* Interne Elemente vertikal zentrieren */
  gap: 0.1rem;         /* Abstand zwischen internen Elementen */
  flex-wrap: nowrap;     /* AUCH HIER: Interne Elemente nicht umbrechen! */
  flex-shrink: 1;      /* Erlauben, dass dieser Block schrumpft, wenn nötig */
  flex-grow: 0;        /* Soll nicht unnötig wachsen */
  min-width: 0;        /* Erlaubt starkes Schrumpfen */
}

/* "Given"-Modus spezifisch (ist meist eh schmal genug) */
#ratio_given_mode {
  padding: 0 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: var(--standard-radius);
  min-height: 32px;
  box-sizing: border-box;
  white-space: nowrap;
  /* display: none; bleibt vom JS gesteuert */
}

/* Labels (innerhalb der Modus-Blöcke) */
.ratio-label, .given-label {
  flex-shrink: 0;
  white-space: nowrap; /* Wichtig */
  /* Restliches Styling wie gehabt */
  margin-right: 0.1rem;
  font-weight: 500;
  line-height: 32px; /* Höhe anpassen */
  font-size: 0.95rem;
}



/* Specific color for the 'Given ratio:' label */
.given-label {
  color: red; /* Oder einen spezifischeren Rotton, z.B. #D9534F */
  /* Optional: Wenn du es fett haben möchtest: */
  /* font-weight: bold; */
}









/* Select-Dropdown (innerhalb #ratio_input_mode) */
#ratio_select {
  /* Etwas mehr Breite geben */
  flex: 0 0 95px; /* von 85px auf 95px erhöht */
  width: 82px;    /* von 85px auf 95px erhöht */
  height: 32px;
  box-sizing: border-box;
  
  /* Text zentrieren */
  text-align: center;
  
  /* Abstände optimieren */
  padding-left: 1px;    /* 1px Abstand links */
  padding-right: 14px;  /* etwas reduziert für mehr Textplatz */
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  
  font-size: 0.85rem;
  line-height: normal;
  
  /* Dropdown-Pfeil etwas enger am Rand platzieren */
  background-position: right 1px center;
  background-size: 0.8em;
  
  border: 1px solid var(--border-color);
  background-color: #D8D8D8;
  border-radius: var(--standard-radius);
  
  /* Overflow-Behandlung deaktiviert, damit Text nicht abgeschnitten wird */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}















/* Textfeld (innerhalb #ratio_input_mode) - DAS IST DER FLEXIBLE TEIL */
#ratio_text_input {
  padding-left: 4px;  /* Dein angepasster Wert */
  padding-right: 4px; /* Dein angepasster Wert */
  flex: 1 1 auto;
  min-width: 95px;
  width: 95px;
  height: 32px;
  box-sizing: border-box;
  /* padding: 0 0.5rem;  <-- Sicherstellen, dass diese Zeile entfernt oder angepasst ist (wie in vorheriger Antwort besprochen) */
  /* oder alternativ: padding: 0 4px; */
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  background-color: #fff;
  border-radius: var(--standard-radius);
  color: #8a2be2;

  /* NEU: Text zentrieren */
  text-align: center;
}

/* Lock-Button (innerhalb #ratio_input_mode) */
.button-ratio-lock {
  flex: 0 0 auto;
  /* white-space: nowrap; */ /* Entfernt oder auskommentiert, damit <br> wirkt */
  white-space: normal; /* Oder explizit auf normal setzen */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* Sicherstellen, dass beide Zeilen zentriert sind */
  height: 32px;
  padding: 0 0.2rem; /* Horizontalen Padding stark reduziert (z.B. 0.2rem) */
  font-size: 0.8rem; /* Eventuell Schrift leicht verkleinern */
  line-height: 1.1; /* Leicht erhöhter Zeilenabstand für Lesbarkeit */
  background-color: #f0f0f0;
  border: 1px solid var(--border-color);
  border-radius: var(--standard-radius);
  cursor: pointer;
  transition: all 0.2s;
}
.button-ratio-lock:hover { background-color: #e0e0e0; }

/* X-Button (innerhalb #ratio_given_mode) */
.ratio-constraint-remove {
   flex: 0 0 auto; /* Feste Breite */
   /* Restliches Styling wie gehabt */
   background-color: #e0e0e0; border: none; color: #555; font-weight: bold; cursor: pointer;
   padding: 0 8px; font-size: 1.1rem; line-height: 1; border-radius: 3px; height: 20px;
   display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
}
.ratio-constraint-remove:hover { background-color: #d9534f; color: white; }

/* Der Info-Link (direktes Kind von #ratio_control_container) */
.tooltip-info-trigger {
  flex-shrink: 0; /* Link selbst soll nicht schrumpfen */
  white-space: nowrap; /* "[Info]" nicht umbrechen */
  /* Restliches Styling wie gehabt */
  margin-left: 0; line-height: 32px; display: inline-flex; align-items: center;
}


/* Entfernung der alten "Given"-Anzeigen bleibt bestehen */
.ratio-constraint-display { display: none !important; }

/* Elternelement .flex-item: Sollte normal flexibel sein */
#ratio_controls_row .flex-item:first-child {
   flex: 1; /* Standardverhalten: nimmt verfügbaren Platz in der Reihe ein */
   min-width: 0; /* Wichtig, damit es schrumpfen kann */
}


/* ===============================================================
   4. DATA VISUALIZATION
   =============================================================== */

/* 4.001 Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-top: 2rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 500px;
}

.table th, 
.table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  vertical-align: top;
  white-space: nowrap;
}

.table-striped tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 4.002 Table color variations */
.table-primary th, 
.table-primary td {
  background-color: var(--primary-bg);
}

.table-success th, 
.table-success td {
  background-color: var(--success-bg);
}

.table-warning th, 
.table-warning td {
  background-color: var(--warning-bg);
}

/* 4.003 Special element for color depth template */
/* 4.003 Special element for color depth template */
#template_color_depth {
  width: auto;
  max-width: 100%;
  height: 32px;
  padding: 0 0.8rem;
  line-height: 32px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e0a800;
  border-radius: 4px;
  color: #0000EE; /* Classic HTML link blue */
  font-size: 1rem;
}

/* 4.004 Formula Blocks */
.formelblock, 
.infotabelle {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.formelblock {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1em;
  background-color: #fff;
}

.formelkarte {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 2em;
  background: #fff;
  overflow: hidden;
}

.pair {
  flex: 1 1 50%;
  box-sizing: border-box;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 0;
}

.pair:last-child {
  border-right: none;
}

.formelkopf {
  background: #f0f0f0;
  font-size: 0.9em;
  padding: 0.5em 1em;
  border-bottom: 1px solid #ddd;
}

.formelinhalt {
  font-size: 1em;
  padding: 1em;
  word-wrap: break-word;
  overflow-x: hidden;
}

/* 4.005 Info Tables */
/* 4.006 Infowerte variation */
.formelkarte.infowerte {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.3em;
  border: none;
  background: none;
}

.formelkarte.infowerte .pair {
  flex: 1 1 50%;
  padding: 0.3em 0;
  box-sizing: border-box;
  border: none;
}

.formelkarte.infowerte .formelinhalt {
  font-size: 0.95em;
  padding: 0;
  line-height: 1.4;
  border: none;
}

hr.infotrenner {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 0.3em 0;
}

.infotabelle {
  margin: 2em 0;
  padding: 1em;
  border: 1px solid var(--border-color);
  background-color: var(--light-bg);
  max-width: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.infotabelle table {
  width: 100%;
  border-collapse: collapse;
}

.infotabelle td {
  padding: 0.5em 1em;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.infotabelle td:first-child {
  font-weight: bold;
  width: 40%;
  white-space: nowrap;
}

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

/* 4.007 Calculation Blocks */
#calc_blocks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--standard-gap);
  margin-bottom: 2rem;
}

.calc-input {
  padding: 1rem;
  box-sizing: border-box;
}

.calc-result {
  padding: 0 1rem 1rem 1rem;
  box-sizing: border-box;
}

/* 4.008 Pixel Block for visualization */
.pixel-block {
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, #222 0%, #eee 100%);
  color: red;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

/* ===============================================================
   5. DPI INFORMATION SECTION
   =============================================================== */

/* 5.001 DPI Info Container */
.dpi-info-wrapper {
  background: #fff;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

.dpi-info-content {
  max-width: 960px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}

/* 5.002 DPI Content Typography */
.dpi-info-title {
  font-size: 1.8em;
  color: #222;
  margin-bottom: 0.2em;
}

.dpi-info-subtitle {
  font-size: 1.4em;
  color: #333;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.dpi-info-content ul {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  padding-left: 1.4em;
}

.dpi-info-content ul li {
  margin-bottom: 0.4em;
}

/* 5.003 DPI page specific styles */
#dpi-page h2 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

#dpi-page p, 
#dpi-page ul, 
#dpi-page figure {
  margin-bottom: 1.5rem;
}

/* 5.004 DPI Tables */
.dpi-info-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  box-shadow: none;
  border-radius: 8px;
  border: 1px solid #e0e4e8;
  overflow: hidden;
}

.dpi-info-content .table-title {
  font-size: 1.25em;
  margin: 16px 0;
  font-weight: 500;
  color: #333;
}

.dpi-info-content th, 
.dpi-info-content td {
  padding: 6px 12px;
  text-align: left;
  vertical-align: top;
  border-width: 0 0 1px 0;
  border-style: solid;
}

.dpi-info-content th {
  background-color: #eef2f6;
  font-weight: 500;
  color: #222;
  border-color: #d6dce2;
}

.dpi-info-content td {
  border-color: #f0f0f0;
}

.dpi-info-content tr:last-child td {
  border-bottom: none;
}

/* ===============================================================
   6. RESULTS & PREVIEW (Added on 15.4.2025)
   =============================================================== */



/* Style for disabled preview link */
.disabled-link {
  pointer-events: none; /* Prevents click events */
  cursor: default;      /* Changes cursor to default arrow */
  opacity: 0.6;         /* Makes it look faded/disabled */
}

.disabled-link:hover .fullview-label {
   background-color: var(--light-bg); /* Standard-Hintergrund */
   color: inherit; /* Standard-Textfarbe */
}







/* 6.001 Results Container */
.results-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--standard-gap);
  margin-top: 2rem;
  width: 100%;
  align-items: flex-start;
}

.results-container .results-table {
  flex: 1 1 60%;
  min-width: 300px;
  margin-top: 0;
}

/* 6.002 Image Preview Box */
.image-virtual-container {
  flex: 1 1 30%;
  min-width: 220px;
  display: block; /* Block statt flex für bessere Browser-Kompatibilität */
}

/* 6.002a Gesamtbox für Vorschau */
.image-virtual-box {
  border: 1px solid var(--border-color);
  border-radius: var(--standard-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--light-bg);
}

/* 6.002b Bild-Bereich mit fester Höhe */
.image-preview-section {
  height: 300px; /* Feste Höhe beibehalten */
  overflow: hidden; /* Wichtig für den Zuschnitt */
  display: flex; /* Flexbox für bessere Zentrierung */
  align-items: center;
  justify-content: center;
}

/* 6.002c Placeholder für das Bild */
.image-virtual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  box-sizing: border-box;
}

/* 6.003 Preview Image Styling */
#preview-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

#preview-image-wrapper {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* Wichtig: 'cover' statt 'contain' */
  object-position: center;
  image-rendering: pixelated;
  opacity: 1;
  transition: opacity 0.3s;
}

/* 6.004 Preview Info Section */
.image-virtual-info {
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-top: 1px solid var(--border-color);
  text-align: center;
  flex-shrink: 0; /* Verhindert Schrumpfen */
  height: auto; /* Automatische Höhe basierend auf Inhalt */
  min-height: 60px; /* Minimale Höhe für den Infobereich */
  box-sizing: border-box;
  position: relative; /* Wichtig für korrekte Darstellung */
  z-index: 2; /* Stellt sicher, dass Text immer sichtbar ist */
}

/* 6.004a "Vollansicht"-Label */
.fullview-label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--primary-color);
  border-radius: var(--standard-radius);
  font-size: 0.85rem;
  margin-right: 0.5rem;
  background-color: var(--light-bg);
  transition: background-color 0.3s, color 0.3s;
}

/* Hover-Effekt auf das Label, wenn man über die gesamte Box fährt */
a.image-link:hover .fullview-label {
  background-color: var(--primary-color);
  color: #fff;
}

.image-virtual-info p {
  margin: 0 0 0.3rem 0;
  font-weight: 500;
  font-size: 0.85rem;
  color: #495057;
}

.image-dimensions {
  font-size: 0.9rem;
  color: #212529;
  font-weight: bold;
  margin-top: 2px;
}

/* ===============================================================
   7. RESPONSIVE STYLES
   =============================================================== */

/* 7.001 Tablet (768px) */
@media (max-width: 768px) {
  /* 7.002 Basic responsive adjustments */
  .flex-item {
    flex: 1 1 100%;
    min-width: 0;
  }
  
  .flex-row {
    flex-direction: column;
  }
  
  .calc-block {
    flex-direction: column;
  }
  
  /* 7.003 Preview container adjustments */
  .results-container {
    flex-direction: column;
  }
  
  .image-virtual-container {
    order: -1; /* Move preview box above the table */
    width: 100%;
  }
  
  .image-preview-section {
    height: 250px; /* Etwas kleiner auf Tablets */
  }
  
  .results-container .results-table {
    width: 100%;
  }
  
  .image-virtual-info {
    min-height: 50px; /* Etwas kleiner auf Tablets */
    padding: 0.5rem 0.75rem;
  }
  
  .image-virtual-info p {
    font-size: 0.8rem;
  }
  
  .image-dimensions {
    font-size: 0.85rem;
  }
}

/* 7.004 Mobile (600px) */
@media screen and (max-width: 600px) {
  /* 7.005 Formula cards layout changes */
  .formelkarte,
  .formelkarte.infowerte {
    flex-direction: column;
  }
  
  .pair,
  .formelkarte.infowerte .pair {
    flex: 1 1 100%;
    border-right: none;
  }
  
  /* 7.006 Preview container on mobile */
  .image-preview-section {
    height: 200px; /* Noch kleiner auf Mobilgeräten */
  }
}
 





/* 7.007 Small Mobile (350px) */
@media screen and (max-width: 350px) {
  .table-responsive td,
  .dpi-info-content td {
    padding-left: 8px;
    padding-right: 8px;
  }
}






/* 
===============================================================
 8. SPECIFIC FIXES
===============================================================
*/

/* 8.001 Fix für die Ausrichtung des DPI-Ergebnisses */
#calc_pixel_density {
  padding-bottom: 58px; /* Kompensiert das fehlende Eingabefeld */
}