/* Grundlegende Typografie-Anpassungen */
      body,
      html {
        font-family: 'Sarabun', sans-serif;
        background-color: #f3f4f6;
        -webkit-font-smoothing: antialiased;
        color: #474f60; /* elk-dunkelgrau */
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      /* A4 Papier Simulation für den Bildschirm */
      .a4-page {
        width: 100%;
        max-width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        background: white;
        padding: 20mm;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        position: relative;
        box-sizing: border-box;
      }

      /* Rich Text Styling für die Vorschau */
      .article-content p {
        margin-bottom: 0.75rem;
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
      }
      .article-content ul {
        list-style-type: disc;
        margin-left: 1.5rem;
        margin-bottom: 0.75rem;
        text-align: justify;
      }
      .article-content ol {
        list-style-type: decimal;
        margin-left: 1.5rem;
        margin-bottom: 0.75rem;
        text-align: justify;
      }
      .article-content li {
        margin-bottom: 0.25rem;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
      }
      .article-content .ql-indent-1 { padding-left: 2em; border-left: 2px solid #e5c0e0; margin-left: 0; }
      .article-content .ql-indent-2 { padding-left: 4em; border-left: 2px solid #e5c0e0; margin-left: 0; }
      .article-content .ql-indent-3 { padding-left: 6em; border-left: 2px solid #e5c0e0; margin-left: 0; }
      .article-content .ql-indent-4 { padding-left: 8em; border-left: 2px solid #e5c0e0; margin-left: 0; }
      .article-content .ql-indent-5 { padding-left: 10em; border-left: 2px solid #e5c0e0; margin-left: 0; }
      .article-content a {
        color: #8d197c; /* elk-violett */
        text-decoration: underline;
      }
      .article-content b,
      .article-content strong {
        font-weight: 700;
      }
      .article-content i,
      .article-content em {
        font-style: italic;
      }
      .article-content h3 {
        font-size: 1.125rem;
        font-weight: 600; /* Sarabun SemiBold */
        color: #8d197c; /* elk-violett */
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
        page-break-after: avoid;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
      }
      .article-content h4 {
        font-size: 1rem;
        font-weight: 600; /* Sarabun SemiBold */
        color: #474f60; /* elk-dunkelgrau */
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
        page-break-after: avoid;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
      }
      .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.25rem;
        margin: 1rem 0;
        display: block;
      }

      /* Custom Styling für Accordion TOC */
      details > summary {
        list-style: none;
      }
      details > summary::-webkit-details-marker {
        display: none;
      }

      /* Druck-Spezifische Anweisungen */
      @page {
        size: A4 portrait;
        margin: 15mm;
      }

      @media print {
        body,
        html {
          height: auto !important;
          overflow: visible !important;
          display: block !important;
          background-color: white !important;
        }
        #app-container {
          display: block !important;
          height: auto !important;
          overflow: visible !important;
        }
        #preview-area {
          padding: 0 !important;
          background: white !important;
          overflow: visible !important;
        }
        .a4-page {
          width: 100% !important;
          max-width: none !important;
          min-height: auto !important;
          margin: 0 !important;
          padding: 0 !important;
          box-shadow: none !important;
        }
        .no-print {
          display: none !important;
        }
        /* Druck-Optimierungen für Artikel */
        article {
          page-break-inside: auto;
          break-inside: auto;
        }
        .break-inside-avoid,
        img,
        blockquote,
        .bg-purple-50 {
          page-break-inside: avoid;
          break-inside: avoid;
        }
        h1,
        h2,
        h3,
        h4 {
          page-break-after: avoid;
          break-after: avoid;
          page-break-inside: avoid;
          break-inside: avoid;
        }
        p {
          orphans: 3;
          widows: 3;
        }
      }

      /* =======================================================
         Landeskirche CD – Tailwind purple → Violett überschreiben
         Hausfarbe: #8d197c | Dunkelviolett: #591855
         ======================================================= */
      .text-purple-900  { color: #591855 !important; }
      .text-purple-800  { color: #8d197c !important; }
      .text-purple-700  { color: #8d197c !important; }
      .text-purple-600  { color: #8d197c !important; }
      .bg-purple-700    { background-color: #8d197c !important; }
      .bg-purple-800    { background-color: #591855 !important; }
      .hover\:bg-purple-800:hover { background-color: #591855 !important; }
      .bg-purple-50     { background-color: #fdf3fc !important; }
      .bg-purple-100    { background-color: #f5ddf2 !important; }
      .hover\:bg-purple-100:hover { background-color: #f5ddf2 !important; }
      .border-purple-800 { border-color: #8d197c !important; }
      .border-purple-100 { border-color: #e5c0e0 !important; }
      .text-purple-900.hover\:text-purple-900:hover,
      .hover\:text-purple-900:hover { color: #591855 !important; }
      .focus\:ring-purple-500:focus { --tw-ring-color: #8d197c !important; }
      /* Checkbox accent */
      input[type="checkbox"].text-purple-600 { accent-color: #8d197c; }

      /* Drag & Drop Feedback */
      .sortable-ghost {
        opacity: 0.4;
        background-color: #f9fafb;
        border: 2px dashed #9ca3af;
        border-radius: 0.5rem;
      }

      /* Quill Anpassungen im Editor */
      .ql-toolbar {
        background: #f9fafb;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
      }
      .ql-container {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        font-family: inherit;
      }

      /* Static grid layout classes (replaces Tailwind dynamic grid-cols-*) */
      .img-grid-1 { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
      .img-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
      .img-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
      .img-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

      /* Preview layout grids (half, third, img-left, img-right) */
      .half-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
      .third-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
      .layout-img-left-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; }
      .layout-img-right-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; }
      @media (max-width: 640px) {
        .half-grid, .third-grid, .layout-img-left-preview, .layout-img-right-preview { grid-template-columns: 1fr !important; }
        .img-grid-2, .img-grid-3, .img-grid-4 { grid-template-columns: 1fr; }
      }

      /* =============================================
         IMAGE MANAGER
         ============================================= */
      #img-drop-zone.drag-over {
        border-color: #8d197c;
        background-color: #fdf4ff;
        color: #8d197c;
      }

      .img-tile {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 4px 6px;
      }
      .img-tile img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
        box-shadow: none;
      }
      .img-tile input[type="text"] {
        flex: 1;
        min-width: 0;
        font-size: 0.7rem;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 2px 6px;
        outline: none;
      }
      .img-tile input[type="text"]:focus {
        border-color: #8d197c;
        box-shadow: 0 0 0 1px #8d197c;
      }
      .img-tile button {
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 0.8rem;
        line-height: 1;
        color: #6b7280;
        transition: background 0.15s, color 0.15s;
      }
      .img-tile button:hover {
        background: #f3f4f6;
        color: #111827;
      }
      .img-tile .img-drag-handle {
        cursor: grab;
        color: #9ca3af;
        font-size: 0.95rem;
        padding: 2px 3px;
        flex-shrink: 0;
      }
      .img-tile .img-drag-handle:active {
        cursor: grabbing;
      }

      /* =============================================
         LAYOUT THUMBNAIL GRID
         ============================================= */
      .layout-thumb-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 4px;
        border: 2px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        background: #f9fafb;
      }
      .layout-thumb-card:hover {
        border-color: #c084fc;
        background: #fdf4ff;
      }
      .layout-thumb-card.active {
        border-color: #7e22ce;
        background: #faf5ff;
      }
      .layout-thumb-card span {
        font-size: 0.6rem;
        color: #6b7280;
        text-align: center;
        line-height: 1.2;
      }
      .layout-thumb-card.active span {
        color: #7e22ce;
        font-weight: 600;
      }

      /* =============================================
         CROP MODAL
         ============================================= */
      #crop-modal .cropper-container {
        max-height: 380px;
      }