/**
 * Product Description Isolation
 * 
 * Isoliert die Produktbeschreibung, damit inline-Styles
 * nicht die restliche Seite beeinflussen
 */

.product-description {
    /* Basis-Container */
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* AI Content Wrapper - Isoliert KI-generierte Inhalte */
.ai-content-wrapper {
    /* Starke Isolation */
    isolation: isolate;
    contain: layout style paint;
    
    /* Eigener Stacking Context */
    position: relative;
    z-index: 0;
    
    /* Overflow verhindern */
    overflow: hidden;
    
    /* Maximale Breite */
    max-width: 100%;
    
    /* Basis-Styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #212529;
}

/* Alle direkten Kinder im Wrapper begrenzen */
.ai-content-wrapper > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Verhindere, dass Margins nach außen wirken */
.ai-content-wrapper > *:first-child {
    margin-top: 0 !important;
}

.ai-content-wrapper > *:last-child {
    margin-bottom: 0 !important;
}

/* AI Content Scoped - MAXIMALE Isolation mit inline-styles */
.ai-content-scoped {
    /* KRITISCH: Maximale Containment-Isolation */
    contain: layout style paint !important;
    isolation: isolate !important;
    
    /* Eigener Stacking Context - verhindert z-index Probleme */
    position: relative !important;
    z-index: 1 !important;
    
    /* Basis-Layout - WICHTIG: Kein display override! */
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    
    /* WICHTIG: overflow hidden verhindert dass Elemente rausragen */
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    
    /* Spacing */
    padding: 1rem !important;
    margin: 0 !important;
    
    /* Box-Model */
    box-sizing: border-box !important;
    
    /* Basis-Typografie */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #212529 !important;
    background: transparent !important;
    
    /* Verhindere dass der Container selbst beeinflusst wird */
    float: none !important;
    clear: both !important;
}

/* Basis-Resets für ALLE Elemente (nur sichere Properties) */
.ai-content-scoped *,
.ai-content-scoped *::before,
.ai-content-scoped *::after {
    /* Kritische Sicherheits-Resets */
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    z-index: auto !important;
    float: none !important;
    clear: none !important;
    
    /* Verhindere Layout-Bruch */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    
    /* KEINE Color/Background Resets hier - die bleiben erhalten! */
}

/* ========================================
   SCHÖNE KONTROLLIERTE STYLES
   (müssen VOR der nuklearen Option kommen)
   ======================================== */

/* Paragraphen */
.ai-content-scoped p {
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    color: #333 !important;
    line-height: 1.7 !important;
    text-align: justify !important;
}

/* Divs - neutral */
.ai-content-scoped div {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Spans - inline */
.ai-content-scoped span {
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Headings - schöne Hierarchie */
.ai-content-scoped h1,
.ai-content-scoped h2,
.ai-content-scoped h3,
.ai-content-scoped h4,
.ai-content-scoped h5,
.ai-content-scoped h6 {
    padding: 0 !important;
    margin: 2rem 0 1rem 0 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.ai-content-scoped h1 {
    font-size: 2rem !important;
    border-bottom: 3px solid #0d6efd !important;
    padding-bottom: 0.5rem !important;
}

.ai-content-scoped h2 {
    font-size: 1.75rem !important;
    border-bottom: 2px solid #6c757d !important;
    padding-bottom: 0.4rem !important;
}

.ai-content-scoped h3 {
    font-size: 1.5rem !important;
    color: #0d6efd !important;
}

.ai-content-scoped h4 {
    font-size: 1.25rem !important;
    color: #495057 !important;
}

.ai-content-scoped h5,
.ai-content-scoped h6 {
    font-size: 1.1rem !important;
    color: #6c757d !important;
}

/* Listen */
.ai-content-scoped ul,
.ai-content-scoped ol {
    padding: 0 0 0 2rem !important;
    margin: 0 0 1rem 0 !important;
}

.ai-content-scoped li {
    padding: 0 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* Strong/Bold */
.ai-content-scoped strong,
.ai-content-scoped b {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* Emphasis/Italic */
.ai-content-scoped em,
.ai-content-scoped i {
    font-style: italic !important;
    color: #495057 !important;
}

/* Links */
.ai-content-scoped a {
    color: #0d6efd !important;
    text-decoration: underline !important;
}

.ai-content-scoped a:hover {
    color: #0a58ca !important;
    text-decoration: none !important;
}

/* Blockquotes */
.ai-content-scoped blockquote {
    border-left: 4px solid #0d6efd !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
    background: #f8f9fa !important;
    font-style: italic !important;
    color: #495057 !important;
}

/* Code */
.ai-content-scoped code {
    background: #f8f9fa !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 0.25rem !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9em !important;
    color: #d63384 !important;
}

.ai-content-scoped pre {
    background: #f8f9fa !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin: 1rem 0 !important;
    overflow-x: auto !important;
}

.ai-content-scoped pre code {
    background: transparent !important;
    padding: 0 !important;
    color: #212529 !important;
}

/* ========================================
   SICHERHEIT: Blockiere gefährliche inline-styles
   ======================================== */

/* ========================================
   INLINE-STYLE ISOLATION
   Inline-styles bleiben, aber werden begrenzt
   ======================================== */

/* ALLE Elemente mit inline-styles - erzwinge sichere Werte */
.ai-content-scoped *[style] {
    /* KRITISCH: Verhindere Layout-Bruch */
    position: static !important;
    float: none !important;
    clear: none !important;
    
    /* Begrenze Größen - WICHTIG für Grid */
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    
    /* Verhindere Positionierung */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    
    /* Verhindere z-index Probleme */
    z-index: auto !important;
    
    /* Verhindere Overflow */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    
    /* Verhindere Flex/Grid auf Kindern */
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    
    /* Verhindere Grid auf Kindern */
    grid-column: auto !important;
    grid-row: auto !important;
    
    /* Inline-styles für color, background, padding, margin bleiben erhalten! */
}

/* Divs und Paragraphen explizit als Block */
.ai-content-scoped div[style],
.ai-content-scoped p[style] {
    display: block !important;
}

/* Spans müssen inline bleiben */
.ai-content-scoped span[style] {
    display: inline !important;
}

/* Basis-Typografie für Beschreibung */
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.product-description h1 { font-size: 2rem; }
.product-description h2 { font-size: 1.75rem; }
.product-description h3 { font-size: 1.5rem; }
.product-description h4 { font-size: 1.25rem; }
.product-description h5 { font-size: 1.1rem; }
.product-description h6 { font-size: 1rem; }

.product-description p {
    margin-bottom: 1rem;
}

.product-description ul,
.product-description ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.product-description li {
    margin-bottom: 0.5rem;
}

.product-description a {
    color: #0d6efd;
    text-decoration: underline;
}

.product-description a:hover {
    color: #0a58ca;
}

.product-description strong,
.product-description b {
    font-weight: 700;
}

.product-description em,
.product-description i {
    font-style: italic;
}

.product-description code {
    font-family: 'Courier New', monospace;
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.product-description pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.product-description blockquote {
    border-left: 4px solid #dee2e6;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #6c757d;
}

/* Inline-Styles begrenzen */
.product-description div[style],
.product-description span[style],
.product-description p[style] {
    /* Verhindere, dass Styles nach außen wirken */
    contain: layout style;
}

/* Maximale Breiten für eingebettete Elemente */
.product-description img {
    max-width: 100%;
    height: auto;
}

.product-description table {
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.product-description table td,
.product-description table th {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}