/* ==============================
   Corporate Design Variablen
   ============================== */
:root {
  --text-color: #234B59!important;
  --text-color-alt: #234b58!important;
  --main-bg-color: #ffffff!important;
  --accent-bg-color: #f4f8f9!important;
  --accent-color: #eeb59f!important;
  --second-accent-color: #d13627!important;
  --third-accent-color: #f7a600!important;
  /*--button-color: #234B59;*/
  --button-color: rgb(77, 103, 115);
  --button-disabled: #cccccc!important;
  --rating-star-default: #ccc!important;
  --rating-star-active: gold!important;

  --font-heading: 'Roboto Condensed', sans-serif!important;
  --font-heading-weight-light: 300!important;
  --font-heading-weight-bold: 500!important;

  --font-main: 'Nunito Sans', sans-serif!important;
  --font-main-weight-light: 300!important;
  --font-main-weight-bold: 700!important;
}

/* ==============================
   Global Styles
   ============================== */
* {
  box-sizing: border-box!important;
}
.ukraine-ribbon {
  display: none !important; /* Hide the ribbon by default */
}

/* Base body styles */
body {
  display: flex!important;
  justify-content: center!important;
  align-items: flex-start!important;
  min-height: 100vh!important; /* Use min-height for responsiveness */
  background: var(--main-bg-color) !important;
  color: var(--text-color) !important;
  margin: 0!important;
}

#selbstcheck-wrapper {
  font-family: var(--font-main)!important; /* Use main font variable */
  font-weight: var(--font-main-weight-light)!important; /* Default weight */
  display: flex!important;
  justify-content: center!important;
  align-items: flex-start!important;
  min-height: 100vh!important; /* Use min-height for responsiveness */
  background: var(--main-bg-color) !important;
  color: var(--text-color) !important;
  margin: 0!important;
  padding: 0px 5px 5px 5px !important; /* Add some padding for smaller screens */
  line-height: 1.6!important; /* Improve readability */
}

/* A highly specific rule to override TYPO3's default styles on your wrapper */
#selbstcheck-wrapper[data-font-size] {
    /* Reset font properties to your desired defaults */
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-family: var(--font-main) !important;
    font-weight: var(--font-main-weight-light) !important;
    color: var(--text-color) !important;
}

/* Also apply the same override to your inner container */
#quiz-container[data-font-size] {
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Headings - Apply consistent font and weight */
#quiz-container h1,
#quiz-container h2,
#quiz-container h3 {/* Apply to h1, h2 and h3 for consistency */
  font-family: var(--font-heading) !important;
  font-weight: var(--font-heading-weight-bold) !important;
  color: var(--text-color) !important;
  text-align: center !important; /* Center all main headings */
  margin-bottom: 25px !important; /* Consistent spacing below headings */
}

#quiz-container h1 {
    font-size: 1.4em !important; /* Same as h3 for question text / form titles */
}

#quiz-container h2 {
    font-size: 2em !important; /* Larger for main titles */
}

#quiz-container h3 {
    font-size: 1.4em !important; /* Slightly smaller for question text / form titles */
}

/* Explicit anti-blur and font-smoothing for #question-text */
#question-text {
  font-family: var(--font-heading) !important;
  /*font-weight: var(--font-heading-weight-bold) !important;*/
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  filter: none !important;
  color: var(--text-color) !important;
}

#question-text.forms-heading {
  margin-bottom: 0 !important;
  margin: 0 !important;
}
/* Specific text styles for reuse */
#quiz-container .heading {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-heading-weight-light) !important;
}

#quiz-container .heading-bold {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-heading-weight-bold) !important;
}

#uiz-container  .maintext {
  font-family: var(--font-main) !important;
  font-weight: var(--font-main-weight-light) !important;
}

#quiz-container  .maintext-bold {
  font-family: var(--font-main) !important;
  font-weight: var(--font-main-weight-bold) !important;
}

/* --- General Input/Select/Label Styling --- */
/* Apply consistent styling to labels, inputs, and selects */
#quiz-container label {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-bold)!important; /* Labels usually bolder for prominence */
    color: var(--text-color)!important;
    font-size: 1.1em!important;
}

/* General styling for select elements (used in metadata form) */
#quiz-container  select.form-select {
    width: 100%!important;
    padding: 10px 15px!important;
    border: 1px solid #dcdcdc!important;
    border-radius: 8px!important; /* Rounded corners */
    background-color: var(--main-bg-color)!important;
    color: var(--text-color)!important;
    font-family: var(--font-main)!important;
    font-size: 1em!important;
    cursor: pointer!important;
    appearance: none!important; /* Remove default browser dropdown arrow */
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    /* Custom SVG arrow, matching text color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23234B59'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")!important;
    background-repeat: no-repeat!important;
    background-position: right 10px center!important;
    background-size: 20px!important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease!important;
}

#quiz-container  select.form-select:hover {
    border-color: var(--accent-color)!important;
}

#quiz-container select.form-select:focus {
    border-color: var(--button-color)!important;
    box-shadow: 0 0 0 3px rgba(35, 75, 89, 0.2)!important;
    outline: none!important;
}

/* Required field note styling */
.required-field-note {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 0.85em!important;
    color: var(--text-color-alt)!important;
    text-align: right!important;
    margin-top: 10px!important;
    font-style: italic!important;
}

/* ==============================
   Checkbox Group Styles
   ============================== */
#quiz-container .checkbox-group {
    margin: 1.5em 0!important;
}

#quiz-container .checkbox-label {
    display: flex!important;
    align-items: flex-start!important;
    gap: 12px!important;
    cursor: pointer!important;
    line-height: 1.5!important;
}

#quiz-container .checkbox-label input[type="checkbox"] {
    margin: 0!important;
    margin-top: 2px!important; /* Align with first line of text */
    min-width: 18px!important;
    height: 18px!important;
    accent-color: var(--button-color)!important;
    cursor: pointer!important;
}

#quiz-container .checkbox-label input[type="checkbox"]:focus {
    outline: 3px solid var(--button-color)!important;
    outline-offset: 2px!important;
    box-shadow: 0 0 0 3px rgba(35, 75, 89, 0.3)!important;
}

#quiz-container .checkbox-text {
    flex: 1!important;
    font-size: 0.95em!important;
    color: var(--text-color)!important;
}

#quiz-container .checkbox-text a {
    color: var(--button-color)!important;
    text-decoration: underline!important;
}

#quiz-container .checkbox-text a:hover {
    color: var(--second-accent-color)!important;
}

/* 
Progress bar styling
/* Progress bar styles for global quiz progress */
.progress-bar-container {
    padding: 0em 30px 50px 30px;
    width: 100%;
}
.progress-bar-bg {
    width: 100%!important;
    height: 14px!important;
    background: #eee!important;
    border-radius: 8px!important;
    overflow: hidden!important;
    position: relative!important; /* Needed for absolute positioning of text */
}
.progress-bar-fill {
    height: 100%!important;;
    background: linear-gradient(135deg, var(--text-color), color-mix(in srgb, var(--text-color) 60%, white))!important;
    transition: width 0.4s cubic-bezier(.4,0,.2,1)!important;
    position: absolute!important;
    left: 0!important;
    top: 0!important;
    z-index: 1!important;
}
#progress-bar-text {
    position: absolute!important;
    font-size: 1.1em!important;
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%, -50%)!important;
    text-shadow: #333 1px 1px 1px!important;
    width: 100%!important;
    text-align: center!important;
    font-weight: bold!important;
    color: var(--main-bg-color)!important; /* Or #234B59 or white if you want it inside the fill */
    z-index: 2!important;
    pointer-events: none!important; /* So clicks go through to the bar/buttons */
    display: none!important;
}
fieldset.answer-option-group {
    margin-left: 0px!important;
    margin-right: 0px!important;
}

/* ==============================
   Accessibility Focus Styles
   ============================== */

/* Screen reader only content */
.sr-only {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0, 0, 0, 0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

/* General focus styles for interactive elements */
#quiz-container button:focus,
#quiz-container input:focus,
#quiz-container select:focus,
#quiz-container .quiz-button:focus {
    outline: 3px solid var(--button-color)!important;
    outline-offset: 2px!important;
    box-shadow: 0 0 0 3px rgba(35, 75, 89, 0.3)!important;
}

/* Subtle focus styles for headings (only visible when focused programmatically) */
#quiz-container h1:focus {
    outline: 2px solid transparent!important;
    background-color: rgba(35, 75, 89, 0.02)!important;
    border-radius: 4px!important;
    padding: 0px!important;
}

/* Remove focus padding that causes layout shift on question headings */
#question-text:focus,
h1#question-text:focus {
    padding: 0 !important;
}

/* Focus styles for radio buttons and checkboxes */
#quiz-container input[type="radio"]:focus,
#quiz-container input[type="checkbox"]:focus {
    outline: 3px solid var(--button-color)!important;
    outline-offset: 2px!important;
    box-shadow: 0 0 0 3px rgba(35, 75, 89, 0.3)!important;
}

/* Focus styles for labels (when they contain form controls) */
#quiz-container label:focus-within {
    background-color: rgba(35, 75, 89, 0.05)!important;
    border-radius: 4px!important;
}

/* Enhanced focus for star ratings */
.stars-wrapper input[type="radio"]:focus + label {
    background-color: var(--accent-color)!important;
    border-radius: 50%!important;
    transform: scale(1.2)!important;
    transition: all 0.2s ease!important;
}

/* Focus styles for answer option groups */
.answer-option-group:focus-within {
    background-color: rgba(35, 75, 89, 0.05)!important;
    border-left: 4px solid var(--button-color)!important;
}

/* Fieldset and legend styling for better accessibility */
fieldset.answer-option-group {
    border: 1px solid var(--border-color, #ccc)!important;
    border-radius: 8px!important;
    margin-bottom: 1.5rem!important;
    padding: 15px!important;
}

fieldset.answer-option-group legend {
    font-weight: var(--font-main-weight-bold)!important;
    color: var(--text-color)!important;
    font-size: 1.1em!important;
    padding: 0 0px!important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #quiz-container button:focus,
    #quiz-container input:focus,
    #quiz-container select:focus,
    #quiz-container .quiz-button:focus {
        outline: 4px solid currentColor!important;
        outline-offset: 2px!important;
    }
    
    #quiz-container h1:focus {
        outline: 2px solid currentColor!important;
        background-color: rgba(0, 0, 0, 0.1)!important;
    }
}

/* ==============================
   Container & Layout
   ============================== */
#quiz-container {
  font-family: var(--font-main) !important; /* Use main font variable */
  font-weight: var(--font-main-weight-light)!important; /* Default weight */
  width: 90% !important;
  max-width: 900px !important;
  background: var(--main-bg-color) !important; /* Use variable */
  border-radius: 12px !important; /* Slightly more rounded */
  box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important; /* Stronger shadow */
  overflow: hidden!important;
  display: flex!important; /* Use flexbox for vertical layout */
  flex-direction: column!important;
  line-height: 1.6!important; /* Improve readability */
}

#question-box {
  padding: 30px !important; /* More padding */
  position: relative !important;
  flex-grow: 1 !important; /* Allows it to take up available space */
}

#question-meta {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-bold)!important;
    font-size: 0.9em!important;
    color: var(--text-color-alt)!important;
    text-align: center!important;
    margin-bottom: 10px!important; /* Space below meta info */
}


.quiz-footer {
  padding: 0px 30px 30px 30px !important; /* Adjust padding to match question-box */
  position: relative!important;
  display: flex!important; /* Use flex to control button alignment */
  flex-direction: row-reverse;
  justify-content: space-between!important; /* Push button to the right */
  align-items: center!important;
}


/* ==============================
   Animation
   ============================== */
.fade-in {
  animation: fadeIn 0.5s ease-out!important;
}

@keyframes fadeIn {
  from { opacity: 0!important; transform: translateY(20px)!important; }
  to { opacity: 1!important; transform: translateY(0)!important; }
}

/* ==============================
   Welcome Screen Styling
   ============================== */
.welcome-subtitle {
    font-family: var(--font-main) !important;
    font-weight: var(--font-main-weight-light) !important;
    font-size: 1.1em !important;
    color: var(--text-color) !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.welcome-actions {
    text-align: center !important;
    margin-top: 2em !important;
}

/* Focus enhancement for welcome screen elements */
.welcome-subtitle:focus {
    outline: 2px solid transparent !important;
    background-color: rgba(35, 75, 89, 0.02) !important;
    border-radius: 4px !important;
    padding: 5px !important;
}

/* ==============================
   Button
   ============================== */
#quiz-container button, .quiz-button { /* Apply base button styles */
  font-family: var(--font-heading) !important;
  font-weight: var(--font-heading-weight-bold) !important;
  padding: 12px 25px !important; /* Slightly larger padding */
  font-size: 1.1rem !important; /* Slightly larger font */
  border-radius: 36px !important; /* Rounded button corners */
  cursor: pointer !important;
  border: none !important;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
}

#quiz-container #next-btn {
  background: var(--button-color) !important;
  color: var(--main-bg-color) !important;
  display: block !important;
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  filter: none !important;
}

#quiz-container #next-btn:hover:not(:disabled) {
  background: var(--accent-color) !important; /* Accent color on hover */
  color: var(--text-color) !important; /* Text color changes on hover */
}

#quiz-container #next-btn:disabled {
  background: var(--button-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

#quiz-container #back-btn {
  background: var(--button-color) !important;
  color: var(--main-bg-color) !important;
  display: block !important;
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  filter: none !important;
}

#quiz-container #back-btn:hover:not(:disabled) {
  background: var(--accent-color) !important; /* Accent color on hover */
  color: var(--text-color) !important; /* Text color changes on hover */
}

#quiz-container #back-btn:disabled {
  background: var(--button-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

#quiz-container #show-products-btn {
  background: var(--button-color) !important;
  color: var(--main-bg-color) !important; /* Text color on button */
  display: block !important; /* Ensure it takes its own line if needed */
  margin-left: auto !important; /* Pushes button to the right */ 
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Primary button styling (for Start button and other primary actions) */
#quiz-container .button.primary-button,
#quiz-container button.primary-button {
  background: var(--button-color) !important;
  color: var(--main-bg-color) !important;
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  filter: none !important;
}

#quiz-container .button.primary-button:hover:not(:disabled),
button.primary-button:hover:not(:disabled) {
  background: var(--accent-color) !important;
  color: var(--text-color) !important;
}

#quiz-container .button.primary-button:disabled,
#quiz-container button.primary-button:disabled {
  background: var(--button-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

#quiz-container #show-products-btn:hover:not(:disabled) {
  background: var(--accent-color) !important; /* Accent color on hover */
  color: var(--text-color) !important; /* Text color changes on hover */
}

/* ==============================
   Frage / Antwort Gruppen (General for quiz questions)
   ============================== */
#answer-options {
    padding-top: 20px !important; /* Space between question text and answer options */
}

.answer-option-group {
  display: flex!important;
  align-items: center!important;
  flex-wrap: wrap!important;
  margin-bottom: 1.5rem!important; /* More spacing between groups */
  background-color: var(--main-bg-color)!important;
  padding: 15px!important;
  border-radius: 8px!important;
  border: 1px solid #eee!important;
  /* border-left: 5px solid var(--accent-color)!important;  Accent line */
}

.answer-text {
  flex: 1 1 180px!important; /* Allows flexibility, minimum width */
  margin-right: 1.5rem!important; /* More spacing */
  font-weight: var(--font-main-weight-bold)!important; /* Use bold for question parts */
  color: var(--text-color)!important;
  font-size: 1.1em!important;
}

.answer-options-inline {
  display: flex!important;
  gap: 1.5rem!important; /* More spacing between Ja/Nein/Weiß nicht options */
  flex-wrap: wrap!important;
  padding: 5px 0!important; /* Adjust padding */
}

.answer-option {
  display: flex!important;
  align-items: center!important;
  font-weight: var(--font-main-weight-light)!important; /* Option text is lighter */
}

.answer-option input[type="radio"],
.answer-option input[type="checkbox"] {
  margin-right: 10px!important; /* More space for checkbox/radio */
  transform: scale(1.2)!important; /* Slightly larger radio/checkbox */
  accent-color: var(--text-color)!important; /* Custom color for checked state */
}

#quiz-container .answer-option label {
    font-size: 1em!important; /* Keep label size consistent with text */
    font-weight: 100; /* Option labels lighter */
    cursor: pointer!important;
    margin: 0!important; /* Remove default margin to ensure proper vertical alignment */
}

/* ==============================
   MC Fragen
   ============================== */
.answer-option-mc {
  margin-bottom: 0.8rem!important; /* Consistent spacing */
  font-size: 1.05rem!important; /* Slightly larger text */
  padding: 10px!important;
  background-color: var(--main-bg-color)!important; 
  border-radius: 6px!important;
  border: 1px solid #eee!important;
  border-left: 5px solid var(--accent-color)!important; /* Accent line */
  transition: background-color 0.2s ease!important;
}

.answer-option-mc:hover {
    background-color: #f0f0f0!important;
}

.mc-answer-option-label {
  display: grid!important;
  grid-template-columns: auto 1fr!important;
  align-items: center!important;
  gap: 0.8rem!important; /* Space between checkbox and text */
  cursor: pointer!important;
}

.mc-answer-text {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    color: var(--text-color)!important;
}


/* ==============================
   Bewertung (Sterne)
   ============================== */
.rating-group {
  display: flex!important;
  align-items: center!important;
  margin-bottom: 1.5rem!important; /* Consistent spacing */
  flex-wrap: wrap!important;
  background-color: var(--main-bg-color)!important; 
  padding: 15px!important;
  border-radius: 8px!important;
  border: 1px solid #eee!important;
  border-left: 5px solid var(--accent-color)!important; /* Accent line */
}

.rating-label {
  flex: 1 1 200px!important;
  font-weight: var(--font-main-weight-bold)!important; /* Label bold */
  color: var(--text-color)!important;
  font-size: 1.1em!important;
}

.stars-wrapper {
  display: inline-flex!important;
  direction: rtl!important;
  unicode-bidi: bidi-override!important;
  margin-left: auto!important; /* Push stars to the right */
}

.stars-wrapper input {
  display: none!important;
}

.stars-wrapper label {
  font-size: 2rem!important; /* Larger stars */
  color: var(--rating-star-default)!important;
  cursor: pointer!important;
  padding: 0 0.2rem!important; /* Little more space between stars */
  transition: color 0.2s!important;
}

.stars-wrapper input:checked ~ label {
  color: var(--rating-star-default)!important; /* Keep default for stars "before" checked one (due to rtl) */
}

.stars-wrapper input:checked + label,
.stars-wrapper input:checked + label ~ label {
  color: var(--rating-star-active)!important; /* Active color for checked and stars "after" it */
}

.stars-wrapper label:hover,
.stars-wrapper label:hover ~ label {
  color: var(--rating-star-active)!important; /* Hover effect */
}

/* ==============================
   Info Type Styling
   ============================== */
.info-text {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    padding: 20px!important;
    background-color: var(--accent-bg-color)!important; /* Light background for info text */
    border-left: 5px solid var(--accent-color)!important; /* Accent line */
    border-radius: 4px!important;
    margin-top: 20px!important;
}

/* ==============================
   Feedback Text Styling (New)
   ============================== */
.feedback-content {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    line-height: 1.6!important;
    margin-top: 20px!important;
    padding: 20px!important;
    background-color: var(--accent-bg-color)!important; /* Light background for feedback */
    border-left: 5px solid var(--accent-color)!important; /* Accent line */
    border-radius: 4px!important;
}

.feedback-content p {
    margin-bottom: 1em!important; /* Spacing between paragraphs in feedback */
}

.feedback-content strong { /* <-- ADD THIS RULE */
    font-weight: var(--font-main-weight-bold)!important; /* Or just 'bold', or '700' */
}

/* ==============================
   Endscreen Text Styling (New)
   ============================== */
.endscreen-content {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    line-height: 1.6!important;
    margin-top: 20px!important;
    padding: 20px!important;
   /* border-left: 5px solid var(--accent-color)!important;  Accent line */
    border-radius: 4px!important;
}

.endscreen-content p {
    margin-bottom: 1em!important; /* Spacing between paragraphs in feedback */
}

.endscreen-content strong { /* <-- ADD THIS RULE */
    font-weight: var(--font-main-weight-bold)!important; /* Or just 'bold', or '700' */
}

.results-summary {
    /* have the same font style and size as in feedback-content */
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    padding-left: 25px!important; /* Align with feedback-content */
}

.results-summary strong {
    font-weight: var(--font-main-weight-bold)!important; /* Or just 'bold', or '700' */
}

.results-prompt {
    /* have the same font style and size as in feedback-content */
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    margin-top: 16px!important; /* Space above results prompt */
    padding-left: 25px!important; /* Align with feedback-content */ 
    padding-right: 25px!important; /* Padding on right for better readability */
}

/* ==============================
   Product recommendation page
   ============================== */
/* Updated Product Grid */
.products-grid {
    display: grid!important;
    /*
     * auto-fit: Creates as many columns as can fit. If there are fewer items
     * than fit in a row, the existing items will expand to fill
     * the available space. This is generally preferred for dynamic
     * content like product lists.
     * minmax(260px, 1fr): Each column will be at least 260px wide (adjust this
     * value based on your card content's minimum readable width).
     * It will grow to fill available fractional space (1fr).
     * If the available space is less than 260px, it will automatically
     * stack to a single column (due to auto-fit).
     */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))!important;
    gap: 15px!important; /* Consistent spacing between cards */
    padding: 0px!important; /* Remove padding here if #quiz-container already has it to avoid double padding */
    padding-top: 20px!important;
    margin: 0px!important;

}

/* Individual Product Card (mostly same, ensure min-height is flexible) */
.product-card {
    background-color: #ffffff!important;
    border: 1px solid #e0e0e0!important;
    border-radius: 8px!important;
    padding: 15px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08)!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: space-between!important;
    /* min-height: 220px!important; /* Consider if this fixed min-height is still desired for very compact designs.
                                  It can sometimes prevent natural content flow if content is much shorter/taller.
                                  If removing, ensure card-actions has margin-top: auto. */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out!important;
}

.product-card:hover {
    transform: translateY(-3px)!important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15)!important;
}

/* Card Title */
.product-card .card-title {
    color: var(--font-heading)!important;
    font-size: 1.15em!important;
    margin-top: 0!important;
    margin-bottom: 8px!important;
    line-height: 1.3!important;
}

/* Card Description */
.product-card .card-description {
    font-size: 1em!important;
    color: var(--font-main)!important;
    line-height: 1.4!important;
    flex-grow: 1!important;
    margin-bottom: 12px!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
}

/* Card Meta (Format and Zielgruppe) */
.product-card .card-meta {
    display: flex!important;
    flex-wrap: wrap!important; /* Allows items to wrap to next line if needed */
    gap: 8px 12px!important; /* Slightly reduced gap between meta items */
    font-size: 0.9em!important;
    color: var(--font-main)!important;
    margin-bottom: 12px!important; /* Reduced space before button */
}

.product-card .card-meta .meta-item strong {
    font-weight: bold!important;
    color: #333!important;
    margin-right: 4px!important;
}

/* Card Actions (Button) */
.product-card .card-actions {
    margin-top: auto!important; /* Pushes the button to the very bottom */
    text-align: center!important;
}

.product-card .button.secondary-button {
    display: block!important; /* Make button fill card width */
    width: 100%!important;
    padding: 8px 15px!important;
    font-size: 0.9em!important;
    background-color: var(--button-color)!important;
    color: white!important;
    text-decoration: none!important;
    border-radius: 5px!important;
    transition: background-color 0.3s ease!important;
    box-sizing: border-box!important; /* Important for width: 100% with padding */
}

.product-card .button.secondary-button:hover {
    background-color: var(--accent-bg-color)!important;
}

/* Page Title for Products */
.products-page-title {
    text-align: center!important;
    margin: 30px auto 25px auto!important;
    color: #333!important;
    font-size: 2em!important;
}

/* Global utility for margin-top on the "Quiz neu starten" button */
.mt-4 {
    margin-top: 25px!important; /* Slightly increased for better separation from products grid */
    text-align: center!important;
}

/* ==============================
   Responsive (Mobile)
   ============================== */
@media (max-width: 600px) { /* Adjusted breakpoint for better form layout */
  #quiz-container {
    width: 100%!important;
    margin: 0!important; /* Remove margin on small screens */
    border-radius: 0!important; /* No border-radius on full width */
    box-shadow: none!important; /* No shadow on full width */
  }

  #question-box {
    padding: 20px!important; /* Less padding on small screens */
  }

  .quiz-footer {
    padding: 0px 20px 20px 20px!important; /* Less padding on small screens */
    position: relative!important;
    display: flex!important;
    flex-direction: row-reverse;
    justify-content: space-between!important; /* <-- changed from flex-end */
    align-items: center!important;
  }

  /* Adjust metadata form for smaller screens */
  .metadata-form {
    grid-template-columns: 1fr!important; /* Stack columns on small screens */
    gap: 15px!important; /* Reduce gap */
    padding: 20px!important;
    margin: 20px auto!important;
  }

  .metadata-form label {
    text-align: left!important; /* Align labels to left when stacked */
    padding-top: 0!important; /* Remove padding */
    margin-bottom: 5px!important; /* Space between label and select */
    display: block!important; /* Make label a block to take full width */
  }

  /* General question group adjustments */
  .answer-option-group,
  .rating-group {
    flex-direction: column!important;
    align-items: flex-start!important;
    padding: 10px!important;
  }

  .answer-text,
  .rating-label {
    width: 100%!important;
    margin-right: 0!important;
    margin-bottom: 10px!important; /* Space between label and options */
    text-align: left!important;
  }

  .answer-options-inline {
    justify-content: flex-start!important;
    flex-direction: column!important; /* Stack radio buttons vertically */
    gap: 0.8rem!important; /* Reduce gap */
  }

  .stars-wrapper {
      margin-left: 0!important; /* Reset margin on small screens */
      width: 100%!important; /* Take full width */
      justify-content: flex-start!important; /* Align stars to left */
  }

  .info-text, .feedback-content {
      padding: 15px!important; /* Less padding */
      font-size: 1em!important; /* Smaller font for readability */
  }

  h1, h2, h3 {
      font-size: 1.2em!important; /* Smaller headings on mobile */
  }
}

/* Even smaller screens (e.g., iPhone SE) */
@media (max-width: 380px) {
    #quiz-container h1 { font-size: 1.3em!important; }
    #quiz-container h2 { font-size: 1.8em!important; }
    #quiz-container h3 { font-size: 1.3em!important; }
    .metadata-form, #question-box, .quiz-footer { padding: 15px!important; }
    .metadata-form { gap: 10px!important; }
}

/* ==============================
   New Feedback Styles - Mini Cards with Visual Diagrams
   ============================== */
.feedback-intro {
    font-size: 1.1em !important;
    margin-bottom: 20px !important;
    color: var(--text-color) !important;
    text-align: center !important;
}

.feedback-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.feedback-mini-card {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    transition: box-shadow 0.2s ease !important;
}

.feedback-mini-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
}

.card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    gap: 15px !important;
}

.card-left {
    flex: 1 !important;
    min-width: 0 !important; /* Allows text to wrap properly */
}

.user-answer-badge {
    background: var(--main-bg-color) !important;
    border: 1px solid rgba(35, 75, 89, 0.3) !important;
    color: var(--text-color) !important;
    margin-top: 5px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9em !important;
    font-weight: var(--font-main-weight-bold) !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

.option-statement {
    font-size: 1em !important;
    font-style: italic !important;
    color: var(--text-color) !important;
    line-height: 1.4 !important;
    font-weight: var(--font-main-weight-light) !important;
    margin: 0 !important;
}

.card-right {
    flex-shrink: 0 !important;
    width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.chart-label {
    font-size: 0.85em !important;
    color: #666 !important;
    margin-bottom: 6px !important;
    text-align: right !important;
}

.visual-chart {
    width: 100% !important;
    height: 20px !important;
    background: #f0f0f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    position: relative !important;
    border: 1px solid #ddd !important;
}

.chart-segment {
    height: 100% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75em !important;
    font-weight: bold !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.chart-segment.yes {
    background: linear-gradient(135deg, var(--text-color), color-mix(in srgb, var(--text-color) 60%, white)) !important;
}

.chart-segment.no {
    background: linear-gradient(135deg, var(--second-accent-color), color-mix(in srgb, var(--second-accent-color) 60%, white)) !important;
}

.chart-segment.dont-know {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, white)) !important;
}

.chart-legend {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    font-size: 0.8em !important;
    color: #666 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.legend-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

.legend-dot.yes {
    background: var(--text-color) !important;
}

.legend-dot.no {
    background: var(--second-accent-color) !important;
}

.legend-dot.dont-know {
    background: var(--accent-color) !important;
}

/* Mobile responsive for new feedback design */
@media (max-width: 768px) {
    .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .card-right {
        width: 100% !important;
        align-items: stretch !important;
    }
    
    .chart-label {
        text-align: left !important;
    }
    
    .feedback-mini-card {
        padding: 12px !important;
    }
}

@media (max-width: 480px) {
    .visual-chart {
        height: 24px !important; /* Slightly taller on very small screens */
    }
    
    .chart-segment {
        font-size: 0.7em !important;
    }
    
    .user-answer-badge {
        font-size: 0.85em !important;
        padding: 3px 10px !important;
    }
}

/* ==============================
   Survey Data Styles (New - for survey comparison data)
   ============================== */
.surveydata-intro {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-bold)!important;
    margin-bottom: 15px!important;
    color: var(--text-color)!important;
    font-size: 1.1em!important;
}

.surveydata-options {
    display: flex!important;
    flex-direction: column!important;
    gap: 10px!important;
}

.surveydata-mini-card {
    background-color: #ffffff!important;
    border: 1px solid #e0e0e0!important;
    border-radius: 8px!important;
    padding: 15px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05)!important;
    transition: box-shadow 0.2s ease!important;
}

.surveydata-mini-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important;
}

.surveydata-content {
    font-family: var(--font-main)!important;
    font-weight: var(--font-main-weight-light)!important;
    font-size: 1.1em!important;
    color: var(--text-color)!important;
    line-height: 1.6!important;
    margin-top: 20px!important;
    padding: 20px!important;
    background-color: var(--accent-bg-color)!important;
    border-left: 5px solid var(--accent-color)!important;
    border-radius: 4px!important;
}

.surveydata-content p {
    margin-bottom: 1em!important;
}

.surveydata-content strong {
    font-weight: var(--font-main-weight-bold)!important;
}

/* Mobile responsive for survey data design */
@media (max-width: 768px) {
    .surveydata-mini-card {
        padding: 12px!important;
    }
    
    .surveydata-content {
        padding: 15px!important;
        font-size: 1em!important;
    }
}

@media (max-width: 480px) {
    .surveydata-mini-card {
        padding: 10px!important;
    }
    
    .surveydata-content {
        padding: 12px!important;
        font-size: 0.95em!important;
    }
}

/* ==============================
   Maintenance Mode Styles
   ============================== */
.maintenance-container {
    text-align: center!important;
    padding: 40px 20px!important;
    max-width: 600px!important;
    margin: 0 auto!important;
}

.maintenance-icon {
    font-size: 4em!important;
    margin-bottom: 20px!important;
    opacity: 0.8!important;
}

.maintenance-title {
    font-family: var(--font-heading)!important;
    font-weight: var(--font-heading-weight-bold)!important;
    font-size: 2.5em!important;
    color: var(--text-color)!important;
    margin-bottom: 30px!important;
}

.maintenance-message {
    font-size: 1.2em!important;
    line-height: 1.6!important;
    color: var(--text-color-alt)!important;
    margin-bottom: 30px!important;
    background: var(--accent-bg-color)!important;
    padding: 20px!important;
    border-radius: 8px!important;
    border-left: 4px solid var(--accent-color)!important;
}

.maintenance-footer {
    font-size: 0.9em!important;
    color: #666!important;
    font-style: italic!important;
}

/* Responsive maintenance styles */
@media (max-width: 768px) {
    .maintenance-icon {
        font-size: 3em!important;
    }
    
    .maintenance-title {
        font-size: 2em!important;
    }
    
    .maintenance-message {
        font-size: 1.1em!important;
        padding: 15px!important;
    }
    
    .maintenance-container {
        padding: 30px 15px!important;
    }
    .progress-indicator {
        padding-bottom: 10px;
    }
}


/* TEST !! */
/* ==============================
   Endscreen Specific Overrides (Higher Specificity)
   ============================== */

/* Target the endscreen container with maximum specificity */
#quiz-container #question-box.end-screen-content,
#quiz-container .end-screen-content {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-color) !important;
}

/* Endscreen headings with maximum specificity */
#quiz-container .end-screen-content h1,
#quiz-container .end-screen-content h2,
#quiz-container .end-screen-content h3 {
    font-family: var(--font-heading) !important;
    font-weight: var(--font-heading-weight-bold) !important;
    color: var(--text-color) !important;
    font-size: 1.4em !important;
    margin-bottom: 15px !important;
}

#quiz-container .end-screen-content h2 {
    font-size: 1.8em !important;
}

/* Endscreen paragraphs */
#quiz-container .end-screen-content p {
    font-family: var(--font-main) !important;
    font-size: 1em !important;
    line-height: 1.6 !important;
    margin-bottom: 1em !important;
}

/* Endscreen content sections */
#quiz-container .end-screen-content .thank-you-content,
#quiz-container .end-screen-content .additional-info-content,
#quiz-container .end-screen-content .funding-notice-content,
#quiz-container .end-screen-content .contact-content {
    margin-bottom: 25px !important;
    padding: 15px !important;
    background-color: var(--accent-bg-color) !important;
    border-radius: 8px !important;
}

/* Override TYPO3 font size inheritance for endscreen */
#quiz-container .end-screen-content[data-font-size],
#quiz-container .end-screen-content [data-font-size] {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Emergency endscreen font fix */
#quiz-container .end-screen-content * {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-family: var(--font-main) !important;
}

#quiz-container .end-screen-content h1,
#quiz-container .end-screen-content h2,
#quiz-container .end-screen-content h3 {
    font-size: 1.4em !important;
    font-family: var(--font-heading) !important;
}

.progress-indicator {
    padding-bottom: 5px!important;
}

.question-text-container #question-text {
    text-align: left!important;
    font-size: 1.1em!important;
    margin: 0px!important;
    padding: 0px!important;
    font-weight: 100!important;
}
div#question-meta.question-section-meta {
    font-size: 1.4em!important;
    margin-bottom: 30px!important;
}
git pull origin main --no-rebase

/* Add to your CSS file or inject via JS */
#next-btn.end-screen-hide {
    display: none !important;
}