/* Video Styling*/

iframe[src*="vimeo.com"] {
  width: 100%;
  max-width: var(--content-width);
  aspect-ratio: 16/9 /*fallback*/;
  height: auto;
  display: block;
  max-height: 80vh;
}

/* dflip Styling*/

._df_thumb[thumbtype="img"]{
    margin: 0;
    width: 100%;
    max-width: calc(var(--column-gap) + 2 * var(--column-width));
    height: auto;
}

._df_thumb[thumbtype="img"] img{
    width:100% !important;
    max-height: inherit !important;
    margin-bottom: -5px;
}

._df_book-title {
    display:none !important;
}




/* Die spalten-Klassen können von den Redakteuren beim Bearbeiten der Wordpress-Seiten und Beiträge genutzt werden, um die Breite des entsprechenden Inhaltes anzupassen */
.page-content > * {
  grid-column: 1 / -1;
}

.page-content p,
.page-content p:has(strong),
.page-content p:has(em),
.page-content p:has(a),
.page-content p:has(ul),
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  grid-column: span 3;
}

.page-content p:has(img),
.page-content p:has(iframe),
.page-content p:has(video),
.page-content p:has(*),
.page-content ._df_thumb {
  grid-column: 1 / -1;
}

.page-content p:has(.spalten-1),
.page-content .spalten-1 { grid-column: span 1; }
.page-content p:has(.spalten-2),
.page-content .spalten-2 { grid-column: span 2; }
.page-content p:has(.spalten-3),
.page-content .spalten-3 { grid-column: span 3; }
.page-content p:has(.spalten-4),
.page-content .spalten-4 { grid-column: span 4; }
.page-content p:has(.spalten-full),
.page-content .spalten-full { grid-column: 1 / -1; }

.page-content [class*="spalten-"] { 
    width: 100% !important; 
}

.page-content img[width="600"],
.page-content img[style*="width: 600px"] {
    width: 100% !important; 
}

.page-content img {
    max-height: 80vh;
    object-fit: contain;
    object-position: left;
}

@media (max-width: 935px) {
    .page-content p,
    .page-content p:has(strong),
    .page-content p:has(em),
    .page-content h1,
    .page-content h2,
    .page-content h3,
    .page-content h4,
    .page-content h5,
    .page-content h6 {
        grid-column: 1 / -1; /* volle Breite im 3er Raster */
    }

    .page-content p:has(.spalten-4),
    .page-content .spalten-4 {
        grid-column: 1 / -1; /* volle Breite im 3er Raster */
    }
}

@media (max-width: 768px) {
  .page-content p:has(.spalten-3),
  .page-content .spalten-3,
  .page-content p:has(.spalten-4),
  .page-content .spalten-4 {
    grid-column: 1 / -1; /* volle Breite im 2er Raster */
  }
}

@media (max-width: 270px) {
  .page-content p:has(.spalten-2),
  .page-content .spalten-2,
  .page-content p:has(.spalten-3),
  .page-content .spalten-3,
  .page-content p:has(.spalten-4),
  .page-content .spalten-4 {
    grid-column: 1 / -1; /* volle Breite im 1er Raster */
  }
}