/* Version: 8.1+Preview | Date: 2024-03-08+ | ID=002_preview_v3 */
/* format.css - Hinzufügen Blink-Animation für Dateigrößenwarnung */
/* Update: Optionale Bildvorschau Styles & Layout-Anpassungen */

/* #region 10.000 Grundlegende Styles und Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    background-color: #fdfdfd;
    padding: 20px; /* Etwas Abstand zum Fensterrand */
}
/* #endregion 10.000 Grundlegende Styles und Resets */

/* #region 11.000 Hauptcontainer und Seitenlayout */
.calculator-container { /* Dieser Container wird im aktuellen HTML nicht direkt verwendet, aber als Referenz belassen */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
h1 {
   
    margin-bottom: 20px;
    color: #2c3e50;
}
.intro-text {
   
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #555;
}
hr {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 25px 0;
}
/* #endregion 11.000 Hauptcontainer und Seitenlayout */

/* #region 12.000 Globale Elemente (Einheitenauswahl, Intro) */
/* #region 12.001 Globale Formular-Element-Basis-Styles */
input[type="text"],
input[type="number"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1em;
    color: #333;
    height: auto;
    line-height: normal;
    -moz-appearance: textfield; /* Firefox */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    font-size: 1em;
    color: #333;
    height: auto;
    line-height: normal;
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover {
    border-color: #a0a0a0;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
/* #endregion 12.001 Globale Formular-Element-Basis-Styles */
/* #endregion 12.000 Globale Elemente */

/* #region 13.000 Rechnerblöcke Layout (Calc-Block) */
.calc-block {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 280px; /* Mindestbreite für Blöcke in Reihen */
}
.calc-block.no-border {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.calc-block strong { /* Titel innerhalb der Blöcke */
    display: block;
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #34495e;
}

/* Input-Row Styles (Länge/Breite Eingaben) */
#length-to-pixel-block .input-row,
#pixel-to-length-block .input-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-left: 10px;
    background-color: #fff;
    overflow: hidden;
}

#length-to-pixel-block .input-row input[type="text"],
#pixel-to-length-block .input-row input[type="text"] {
    flex-grow: 1;
    border: none !important;
    background-color: transparent !important;
    padding: 8px 0;
    outline: none;
    font-size: 1em;
    color: #333;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#length-to-pixel-block .input-row span, /* Einheit oder px Label */
#pixel-to-length-block .input-row span {
    white-space: nowrap;
    padding-right: 10px;
    color: #777;
    background-color: transparent;
}

#length-to-pixel-block .input-row span.unit-label, /* Speziell für mm, cm, in */
#pixel-to-length-block .input-row span { /* Gilt auch für 'px' */
    background-color: #c9c7c7;
    padding: 8px 10px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-right: -1px; /* Border Ausgleich */
    color: #3b3a3a;
}
/* #endregion 13.000 Rechnerblöcke Layout */

/* #region 15.000 Format-spezifische Controls (format_specific_controls) */
#format_specific_controls {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* Remove unnecessary padding */
    margin: 0;
}
#format_specific_controls label {
    font-weight: bold;
    margin-right: 8px;
    display: block;
    margin-bottom: 3px;
    width: 100%;
}
#format_specific_controls input[type="number"],
#format_specific_controls select,
#format_specific_controls input[type="range"],
#format_specific_controls input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}
#format_specific_controls input[type="range"] {
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
    display: block;
    padding-left: 0;
    margin-left: 0;
}
#format_specific_controls input[type="number"]#jpg_quality_value,
#format_specific_controls input[type="number"]#png_compression_value,
#format_specific_controls input[type="number"]#generic_quality_value {
    width: 60px;
    text-align: center;
}
#format_specific_controls span { /* Info-Texte unter den Controls */
    font-style: italic;
    color: #555;
    font-size: 0.9em;
    display: block;
    margin-top: 3px;
}
/* #endregion 15.000 Format-spezifische Controls */

/* #region 16.000 Ergebnistabellen */
#results_container h3,
.summary-table-wrapper h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #34495e;
    text-align: left;
}
#results_container h3.old-results-header { /* Spezifischer für die große Tabelle */
    text-align: center;
    margin-bottom: 15px;
}

.format_results_table,
#top_summary_results_table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.format_results_table { margin-top: 20px; }
#top_summary_results_table { margin-top: 0; }


.format_results_table th, .format_results_table td,
#top_summary_results_table th, #top_summary_results_table td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
}
#top_summary_results_table th, #top_summary_results_table td { /* Kleinere Schrift für Top-Tabelle */
    padding: 8px 10px;
    font-size: 0.9em;
}

.format_results_table th,
#top_summary_results_table th {
    background-color: #3498db;
    color: white;
    font-weight: bold;
}

.format_results_table tbody tr:nth-child(even),
#top_summary_results_table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.format_results_table tbody tr:hover,
#top_summary_results_table tbody tr:hover:not(#summary_row_anchor_extra.highlighted-row) { /* Hover für normale Zeilen */
    background-color: #f1f1f1;
}

/* Hervorhebung Anker-Format-Zeile */
.format_results_table tbody tr.highlighted-row,
#top_summary_results_table tbody tr.highlighted-row:not(#summary_row_anchor_extra) {
    background-color: #ffffcc !important;
    font-weight: bold;
}
.format_results_table tbody tr.highlighted-row:hover,
#top_summary_results_table tbody tr.highlighted-row:not(#summary_row_anchor_extra):hover {
    background-color: #fff5b3 !important;
}

/* Spezielle Styles für Anchor-Extra-Zeile in Top-Tabelle */
#top_summary_results_table tbody tr#summary_row_anchor_extra {
    background-color: #e8f4fd;
    font-style: italic;
}
#top_summary_results_table tbody tr#summary_row_anchor_extra td:first-child {
    font-weight: bold;
}
#top_summary_results_table tbody tr#summary_row_anchor_extra .anchor-extra-info {
    text-align: center;
    color: #555;
}
#top_summary_results_table tbody tr#summary_row_anchor_extra:hover {
    background-color: #d0e9fc;
}
#top_summary_results_table tbody tr#summary_row_anchor_extra.highlighted-row {
     background-color: #e6f5c8 !important; /* Grünliche Hervorhebung, wenn sie der Anker ist */
     font-weight: bold;
     font-style: normal;
}
#top_summary_results_table tbody tr#summary_row_anchor_extra.highlighted-row:hover {
    background-color: #d9ecc0 !important;
}

.filesize-warning { /* Statisches Rot für übergroße Dateien */
    color: red !important;
    /* font-weight: bold; */ /* Optional */
}
/* #endregion 16.000 Ergebnistabellen */

/* #region 19.000 Neues Layout-System (Reihen- und Spalten-spezifische Styles) */
.new-calculator-layout-container {
    /* Wird bei Bedarf zum Flex-Container für mobile Order */
}

.layout-row {
    display: flex;
    gap: 20px; /* Standard-Abstand zwischen Spalten in einer Reihe */
    margin-bottom: 20px; /* Standard-Abstand zwischen Reihen */
}
.layout-row:last-child {
    margin-bottom: 0;
}

/* Fix alignment for format controls to match container above */
.row-main-config > .layout-col-right.main-config-right {
    padding: 0;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
}

/* Fix format and depth row alignment */
.format-depth-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    margin-left: -20;
  
}

/* Make select elements specifically align properly */
.format-depth-row select {
    padding-left: 8px; /* Reduce left padding to align with edge */
}

/* Target format specific controls alignment */
#format_specific_controls {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Ensure quality controls container aligns properly */
.quality-controls-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure range slider aligns properly */
#format_specific_controls input[type="range"] {
    padding-left: 0;
    margin-left: 0;
}

/* Override any unwanted margin/padding in the main-config-right */
.main-config-right * {
    box-sizing: border-box;
}

/* Ensure the format-depth-row takes full width */
.format-depth-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Make format and depth select containers take equal space */
.format-depth-row .format-select-container,
.format-depth-row .depth-select-container {
    flex: 1;
}

/* Format-specific controls full width alignment */
#format_specific_controls {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Quality controls container full width */
.quality-controls-container {
    width: 100%;
}

/* Ensure all inputs in main-config-right are the same width */
.main-config-right select,
.main-config-right input[type="range"],
.quality-controls-container {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
}

/* Mobile adjustments - already in your CSS */
@media (max-width: 767px) {
    .format-depth-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .format-depth-row .format-select-container,
    .format-depth-row .depth-select-container {
        width: 100%; /* Full width on mobile */
        margin-bottom: 10px;
    }
}

/* Reset the row-calculators layout to ensure side-by-side on desktop */
.layout-row.row-calculators {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
}

/* Only change to column layout on smaller screens */
@media (max-width: 767px) {
  .layout-row.row-calculators {
    flex-direction: column;
    gap: 15px;
  }
  
  /* Ensure both calc blocks have full width on mobile */
  .layout-row.row-calculators .layout-col-left,
  .layout-row.row-calculators .layout-col-right {
    width: 100%;
    min-width: 100%;
  }
  
  /* Small spacing adjustment for better mobile appearance */
  #pixel-to-length-block {
    margin-bottom: 5px;
  }
}
/* #endregion 19.000 Neues Layout-System */

/* #region 20.000 K-Wert Bilder Styling */
.k-images-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -15px; /* Um näher an den oberen Rand des Blocks zu kommen */
}
.k-images-group .k-images-title {
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
}
.k-images-group .k-image-items-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.k-images-group .k-image-new {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 5px;
    transition: border-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.k-images-group .k-image-new:hover {
    border-color: #bbb;
    transform: scale(1.03);
}
.k-images-group .k-image-new.active {
    border-color: #3498db;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}
/* #endregion 20.000 K-Wert Bilder Styling */

/* #region 21.000 Zusammenfassungsblock & Bildvorschau (#summary_block_container) */
#summary_block_container { /* Ist ein .layout-row-full */
    display: flex; /* Bleibt Flex für Desktop-Nebeneinander */
    flex-wrap: wrap; /* Erlaubt Umbruch auf Mobile */
    gap: 20px;
    margin-top: 20px; /* Abstand zur <hr> darüber */
    align-items: flex-start; /* Wichtig für unterschiedliche Höhen */
}
.summary-table-wrapper { /* Linker Block: Top Ergebnisse Tabelle */
    flex-basis: 350px; /* Bevorzugte Breite */
    flex-grow: 1;      /* Kann wachsen */
    min-width: 280px;  /* Mindestbreite */
}
.summary-image-placeholder { /* Rechter Block: Bildvorschau */
    flex-basis: 350px; /* Bevorzugte Breite */
    flex-grow: 0;      /* Wächst nicht über seine Basisbreite hinaus */
    flex-shrink: 0;    /* Schrumpft nicht unter seine Basisbreite */
    display: flex;
    flex-direction: column; /* Controls über dem Bildinhalt */
}

/* Bildvorschau-Steuerung (Toggle Switch) */
.image-preview-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #eee;
}
.preview-toggle-label {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
}
.toggle-switch { /* Label um die Checkbox */
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.toggle-switch input { /* Versteckte Checkbox */
    opacity: 0;
    width: 0;
    height: 0;
}
.slider { /* Der Schieber-Hintergrund */
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.slider:before { /* Der Knubbel */
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider { background-color: #3498db; }
input:focus + .slider { box-shadow: 0 0 1px #3498db; }
input:checked + .slider:before { transform: translateX(24px); }
.slider.round { border-radius: 26px; }
.slider.round:before { border-radius: 50%; }

/* Inhalt des Bildvorschau-Bereichs */
#image_placeholder_content {
    width: 100%;
    min-height: 350px;
    background-color: #f0f0f0;
    border: 2px dashed #cccccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1em;
    color: #888888;
    font-style: italic;
    position: relative; /* Für absolut positionierte Loader/Messages */
}
#image_placeholder_content img { /* Gilt für statischen und dynamischen Platzhalter */
    max-width: 100%;
    max-height: 350px;
    height: auto; /* Behält Seitenverhältnis bei */
    display: block; /* Verhindert extra Platz unter dem Bild */
    border-radius: 4px; /* Leichte Abrundung */
}
#preview_image_loader,
#preview_image_unsupported {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10; /* Über dem Bild */
    color: #333;
    font-style: normal;
}

@media (max-width: 767px) { /* Mobile Anpassungen für Zusammenfassungsblock */
    .summary-table-wrapper,
    .summary-image-placeholder {
        flex-basis: 100%; /* Volle Breite, untereinander */
    }
    #image_placeholder_content {
         min-height: 250px; /* Etwas kleiner auf Mobile */
    }
    #image_placeholder_content img {
        max-height: 250px;
    }
}
/* #endregion 21.000 Zusammenfassungsblock & Bildvorschau */

/* #region 22.000 Unit-DPI-Group Styling */
.unit-dpi-group {
    display: flex !important; /* Wichtig für korrekte Ausrichtung */
    align-items: center !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 10px; /* Beibehalten für inneren Abstand */
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    justify-content: flex-start;
    min-height: 40px; /* Konsistente Höhe */
}
.unit-dpi-group #global_unit_select {
    width: 70px;
    flex-shrink: 0;
    height: 38px;
}
.unit-dpi-group #global_dpi_input_new {
    width: 70px;
    text-align: center;
    flex-shrink: 0;
    height: 38px;
}
/* NEU: Style für den Standard-DPI-Wert - KORRIGIERTER SELECTOR */
.integrated-unit-dpi-group {
    display: flex !important; /* Wichtig für korrekte Ausrichtung */
    align-items: center !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 10px; /* Beibehalten für inneren Abstand */
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    justify-content: flex-start;
    min-height: 40px; /* Konsistente Höhe */
}
.integrated-unit-dpi-group #global_unit_select {
    width: 70px;
    flex-shrink: 0;
    height: 38px;
}
.integrated-unit-dpi-group #global_dpi_input_new {
    width: 70px;
    text-align: center;
    flex-shrink: 0;
    height: 38px;
}
.integrated-unit-dpi-group #global_dpi_input_new.default-value { /* Geändert von .unit-dpi-group zu .integrated-unit-dpi-group */
    color: #999; /* Graue Farbe für den Standardwert */
}
.integrated-unit-dpi-group > span { /* "dpi" Text */
    flex-shrink: 0;
}

/* Allgemeine Stile für clear-button-as-link */
.clear-button-as-link {
    flex-grow: 0; 
    flex-shrink: 0;
    width: auto; 
    min-width: 80px;
    padding: 8px 15px;
    background-color: #e74c3c;
    border: 1px solid #c0392b;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
}
.clear-button-as-link:hover {
    background-color: #c0392b;
    border-color: #a93226;
}
.clear-button-as-link:active {
    background-color: #a93226;
    border-color: #922b21;
}

@media (max-width: 420px) { /* Sehr kleine Bildschirme für Unit/DPI Gruppe */
    .unit-dpi-group {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .unit-dpi-group #global_unit_select,
    .unit-dpi-group #global_dpi_input_new {
        width: 60px !important;
    }
}
/* #endregion 22.000 Unit-DPI-Group Styling */

/* #region 23.000 Vertikale Kontrollen & Qualitäts-Slider Container */
.vertical-controls-group { /* Für mehrere Controls untereinander in format_specific_controls */
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.vertical-controls-group input[type="number"],
.vertical-controls-group select {
    width: 100%;
}
#format_specific_controls input[type="range"] + .vertical-controls-group {
    margin-top: 12px; /* Mehr Abstand nach einem Range Slider */
}

.quality-controls-container { /* Für Range Slider + Zahlenfeld nebeneinander */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.quality-controls-container input[type="range"] {
    flex-grow: 1;
    min-width: 0; /* Erlaubt Schrumpfen */
}
.quality-controls-container input[type="number"] {
    width: 70px; /* Feste Breite für Zahlenfeld */
    text-align: center;
    flex-shrink: 0;
}
/* #endregion 23.000 Vertikale Kontrollen & Qualitäts-Slider Container */

/* Styles für Vorlagen-Select und Clear-Button in ihren neuen Spalten */
#template_calc_select {
  width: 100%;
  height: 40px; /* Konsistente Höhe wie andere Controls */
  box-sizing: border-box;
}

#clear_button_new.clear-button-as-link { /* Spezifischer für diesen Button */
  width: 100%;
  height: 40px; /* Konsistente Höhe */
  display: block; /* Damit Höhe und Breite greifen */
  box-sizing: border-box;
  line-height: calc(40px - (2 * 8px) - (2 * 1px)); /* (Höhe - 2*Padding - 2*Border) für vertikale Zentrierung */
  text-align: center;
}

/* Adjust integrated-unit-dpi-group now that clear button is removed */
/* Responsives Design Anpassung */
@media (max-width: 767px) {
  .integrated-unit-dpi-group {
    margin-bottom: 15px;
  }

  /* Stellen Sie sicher, dass beide Spalten in .row-top-controls volle Breite einnehmen */
  .row-top-controls .layout-col-left,
  .row-top-controls .layout-col-right { /* Korrigierter Selektor */
      width: 100% !important; /* Wichtig für volle Breite auf Mobile */
  }

  /* Damit der Clear-Button im Mobile-Modus oben erscheint */
  .row-top-controls > .layout-col-right { /* Spalte des Clear-Buttons */
      order: 1;
  }
  .row-top-controls > .layout-col-left { /* Spalte der Vorlagen-Auswahl */
      order: 2;
  }
}

/* #region 24.000 Mobile Layout-Anpassungen mit Order (wenn Vorschau aktiv) */
@media (max-width: 767px) {
    .new-calculator-layout-container.preview-active-mobile-layout {
        display: flex;
        flex-direction: column;
    }

    /* Reihenfolge der Hauptblöcke, wenn Vorschau aktiv ist für Mobile: A, B, D, C */

    .new-calculator-layout-container.preview-active-mobile-layout > .row-top-controls { order: 1; }
    .new-calculator-layout-container.preview-active-mobile-layout > .row-calculators { order: 2; }

    .new-calculator-layout-container.preview-active-mobile-layout > .row-main-config {
        order: 3; /* Gruppe A+B */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .new-calculator-layout-container.preview-active-mobile-layout > .row-main-config > .layout-col-left.main-config-left { order: 1; } /* A */
    .new-calculator-layout-container.preview-active-mobile-layout > .row-main-config > .layout-col-right.main-config-right { order: 2; } /* B */

    .new-calculator-layout-container.preview-active-mobile-layout > hr { order: 4; }

    /* #summary_block_container wird für das Flex-Layout des Elternelements "ignoriert" */
    /* Seine Kinder werden stattdessen als direkte Flex-Items behandelt. */
    .new-calculator-layout-container.preview-active-mobile-layout > #summary_block_container {
        display: contents; /* WICHTIG: Macht diesen Container für Flex-Order transparent */
    }

    /* Jetzt ordnen wir die echten Blöcke C und D direkt */
    .new-calculator-layout-container.preview-active-mobile-layout > #summary_block_container > .summary-image-placeholder { order: 5; } /* BLOCK D (Vorschau) */
    .new-calculator-layout-container.preview-active-mobile-layout > #summary_block_container > .summary-table-wrapper { order: 6; }   /* BLOCK C (Top Ergebnisse) */


    .new-calculator-layout-container.preview-active-mobile-layout > .row-result-summary { order: 7; }
    .new-calculator-layout-container.preview-active-mobile-layout > #results_container { order: 8; }
}
/* #endregion 24.000 Mobile Layout-Anpassungen */

/* Hilfsklasse für nicht sichtbare Labels (Accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Summary header container styling */
.summary-header-container {
    display: flex;
    justify-content: flex-start; /* Change from space-between to flex-start */
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    gap: 8px; /* Exact 8px spacing between elements */
}

.summary-header-container h3 {
    margin: 0;
    flex-shrink: 0;
}

.summary-header-container #current_dimensions_display_new {
    margin: 0;
    font-size: 0.9em;
    color: #555;
    text-align: left; /* Change from right to left alignment */
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .summary-header-container {
        flex-direction: row; /* Keep in row even on mobile */
        align-items: center;
        flex-wrap: wrap; /* Allow wrapping if needed */
    }
    
    .summary-header-container h3 {
        margin-bottom: 0;
    }
}



/* Globale Stile für den FAQ-Bereich (optional, zur Abgrenzung) */
.FAQ_content_wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* Leichte Trennlinie */
}

/* Einleitungstexte */
.FAQ_intro_above_calculator,
.FAQ_intro_below_calculator,
.FAQ_conclusion {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Navigation / Inhaltsübersicht */
.FAQ_navigation {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.FAQ_navigation_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.FAQ_navigation_item {
    margin-bottom: 8px;
}
.FAQ_navigation_item:last-child {
    margin-bottom: 0;
}

.FAQ_navigation_link {
    text-decoration: none;
    color: #0056b3; /* Blau für Links, anpassen! */
}
.FAQ_navigation_link:hover,
.FAQ_navigation_link:focus {
    text-decoration: underline;
    color: #003d80;
}

/* Screenreader-Only Klasse (für Überschriften, die nur für ATs sichtbar sein sollen) */
.FAQ_sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Allgemeine Sektionen und Blöcke */
.FAQ_section {
    margin-bottom: 40px;
}

.FAQ_section_title { /* Für H2 in den Sektionen */
    font-size: 1.8em; /* Beispielgröße, anpassen! */
    margin-top: 0;
    margin-bottom: 20px;
    color: #333; /* Dunkelgrau, anpassen! */
    border-bottom: 2px solid #007bff; /* Akzentfarbe, anpassen! */
    padding-bottom: 10px;
}

.FAQ_text_block { /* Für die Abschnitte im "Wissenswertes"-Teil */
    margin-bottom: 25px;
}

.FAQ_subsection_title { /* Für H3 in den Textblöcken */
    font-size: 1.4em; /* Beispielgröße, anpassen! */
    margin-top: 0;
    margin-bottom: 10px;
    color: #444; /* Etwas helleres Grau, anpassen! */
}

.FAQ_text_block p {
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Spezifische Stile für FAQ-Blöcke */
.FAQ_block_intro {
    margin-bottom: 20px;
    font-style: italic;
    color: #555;
    line-height: 1.6;
}

/* Stile für <details> und <summary> Akkordeon */
.FAQ_details {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.FAQ_details[open] {
    background-color: #fdfdfd;
}

/* Style for the <summary> element (the question) */
.FAQ_summary {
    padding: 15px 15px 15px 45px; /* Important: increased left padding for the arrow */
    font-weight: bold;
    cursor: pointer;
    outline: none;
    display: block;
    color: #007bff;
    position: relative;
}

.FAQ_summary:hover,
.FAQ_summary:focus {
    background-color: #f0f8ff;
}

/* Arrow icon for the summary with fixed positioning */
.FAQ_summary::before {
    content: '▶';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
    font-size: 0.8em;
}

/* Rotate arrow when details are open */
.FAQ_details[open] > .FAQ_summary::before {
    transform: translateY(-50%) rotate(90deg);
}

/* Style for the answer content */
.FAQ_answer {
    padding: 5px 15px 15px 45px; /* Match the left padding with summary */
    line-height: 1.7;
    border-top: 1px solid #eee;
}

.FAQ_answer p {
    margin-top: 10px;
    margin-bottom: 0;
}

.FAQ_answer p:first-child {
    margin-top: 5px; /* Reduce space between question and first paragraph */
}

/* Abschlusstext */
.FAQ_conclusion {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
    font-style: italic;
}