/* Plonske responsive layout, maintained for Joomla 6 (v2.1.1).
 * Breakpoints: phone <=767px; tablet 768-1079px; desktop >=1080px.
 * The "responsive" body class is always set by index.php.
 * CSS execution order: template_schwarz -> modern -> custom -> responsive.
 * Section flags (body): is-home, is-art-gallery, is-herbert-section,
 * is-aktuelles-section, is-projekte-section, is-guestbook-section,
 * is-static-info-section. Layout details: README.md.
 * IMPORTANT: Keep PhotoSwipe .pswp__img max-width exception intact.
 */

@media (max-width: 767px) {
  /* The outside edges are one continuous thin, square-cornered frame. */
  body.responsive #wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: calc(100% - 24px);
    margin: 12px auto 24px;
    border: 1px solid #777;
    min-width: 0;
  }
  body.responsive #wrapper > .site-header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  body.responsive .site-header #top-menu-l,
  body.responsive .site-header #top-menu-r {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    border: 0;
    background-image: none;
    padding: 0;
  }
  body.responsive .site-header #top-menu-l ul {
    justify-content: center;
    gap: 0;
    padding: 8px 6px;
  }
  body.responsive .site-header #top-menu-l ul li {
    flex: 0 1 auto;
    width: auto;
  }
  body.responsive .site-header #top-menu-l ul a,
  body.responsive .site-header #top-menu-r ul a {
    display: block;
    width: auto;
    height: auto;
    padding: 8px 9px;
    line-height: 1.4;
  }
  body.responsive .site-header #top-menu-r {
    border-top: 1px solid #777;
  }
  body.responsive .site-header #top-menu-r ul {
    justify-content: center;
  }
  body.responsive #breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 42px;
    border: 0;
    border-top: 1px solid #777;
  }
  body.responsive #breadcrumbs .breadcrumbs {
    width: 100%;
    height: auto;
    min-height: 42px;
    padding: 12px 14px;
  }
  body.responsive #breadcrumbs :is(ul, ol) { flex-wrap: wrap; }
  /* Contextual links precede the artwork, not follow it. */
  body.responsive #menu-right {
    grid-column: 1;
    grid-row: 3;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    height: auto;
    left: auto;
    padding: 8px 14px;
    border: 0;
    border-top: 1px solid #777;
    overflow: visible;
  }
  body.responsive #menu-right ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
  }
  body.responsive #menu-right ul li { padding: 0; margin: 0; }
  body.responsive #menu-right a { display: inline-block; padding: 7px 0; }
  body.responsive #menu-right ul.nav-child {
    display: flex;
    padding-left: 12px;
  }
  /* Remove the desktop artwork-to-sidebar vertical alignment. */
  body.responsive #menu-right #mod-menu111 {
    display: flex;
    flex-flow: row wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
  }
  body.responsive #mod-menu111 > li {
    display: block;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
  }
  body.responsive #content {
    grid-column: 1;
    grid-row: 4;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 250px;
    padding: 20px 16px;
    border: 0;
    border-top: 1px solid #777;
    overflow-x: auto;
  }
  body.responsive #content img,
  body.responsive #content video,
  body.responsive #content iframe {
    max-width: 100%;
  }
  body.responsive #wrapper > .site-footer {
    grid-column: 1;
    grid-row: 5;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    min-height: 35px;
    margin: 0;
    border-top: 1px solid #777;
  }
  body.responsive #footer_l { flex: 1 1 auto; width: auto; }
  body.responsive #footer_r {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-height: 35px;
    padding: 10px 12px;
    background-image: none;
    overflow-wrap: anywhere;
  }
}

/* v2: homepage composition. Interior navigation and breadcrumbs remain intact. */
@media (max-width: 767px) {
  /* On the homepage, the right-hand Startseite tab and breadcrumb repeat
     information already available through the principal navigation. */
  body.responsive.is-home .site-header #top-menu-r,
  body.responsive.is-home #breadcrumbs,
  body.responsive.is-home #menu-right {
    display: none;
  }
  body.responsive.is-home #wrapper {
    grid-template-rows: auto auto auto;
  }
  body.responsive.is-home #wrapper > .site-header { grid-row: 1; }
  body.responsive.is-home #content { grid-row: 2; }
  body.responsive.is-home #wrapper > .site-footer { grid-row: 3; }
  /* Remove the desktop's minimum content height and use the available width. */
  body.responsive.is-home #content {
    min-height: 0;
    padding: 24px 12px 28px;
    overflow-x: hidden;
  }
  body.responsive.is-home #content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  body.responsive.is-home #content :is(figure, picture) {
    max-width: 100%;
  }
  body.responsive.is-home #wrapper > .site-footer {
    min-height: 36px;
  }
}

/* v3: an open, continuous orthogonal line for the MOBILE HOME PAGE.
   The line runs across the navigation top, down its left edge, then
   (as a short lower segment) into the open space. At right it descends
   alongside the artwork, meeting the small footer connector.
   Interior pages retain the boxed v2 layout until their layouts are audited. */
@media (max-width: 767px) {
  body.responsive.is-home #wrapper {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    border: 0;
    border-right: 1px solid #777;
    margin-top: 10px;
    margin-bottom: 24px;
    width: calc(100% - 24px);
    background: transparent;
  }
  body.responsive.is-home #wrapper > .site-header {
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 0;
    background: transparent;
    min-height: 0;
  }
  /* The short horizontal stroke makes the navigation frame visibly open. */
  body.responsive.is-home #wrapper > .site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-home .site-header #top-menu-l {
    min-height: 0;
    border: 0;
    padding: 0 7px;
  }
  body.responsive.is-home .site-header #top-menu-l ul {
    padding: 8px 0 4px;
    gap: 0;
  }
  body.responsive.is-home .site-header #top-menu-l ul a {
    padding: 7px 8px;
  }
  body.responsive.is-home #content {
    border: 0;
    min-height: 0;
    padding: 78px 10px 66px;
    overflow: hidden;
  }
  body.responsive.is-home #content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  body.responsive.is-home #wrapper > .site-footer {
    position: relative;
    border: 0;
    min-height: 40px;
    height: auto;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    background: transparent;
  }
  body.responsive.is-home #footer_l {
    flex: 0 1 auto;
    width: auto;
  }
  body.responsive.is-home #footer_r {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive.is-home #wrapper > .site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
}

/* v4: align the two ends of the open frame precisely on the home page. */
@media (max-width: 767px) {
  /* Move the short navigation underline 10px down. Its left corner continues
     downward by the same distance, so the stroke stays connected. */
  body.responsive.is-home #wrapper > .site-header::after {
    bottom: -10px;
  }
  body.responsive.is-home #wrapper > .site-header::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  /* The original right border followed the full footer height. Replace it
     with a stroke ending exactly at the footer connector's centerline. */
  body.responsive.is-home #wrapper {
    border-right: 0;
  }
  body.responsive.is-home #wrapper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-home #wrapper > .site-footer {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
  }
}


/* v5: Arbeiten overview, phones only. Override its old table layout without
   altering the article HTML or the desktop presentation. */
@media (max-width: 767px) {
  body.responsive #arbeiten {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    text-align: left;
  }
  body.responsive #arbeiten .top {
    margin: 0 0 30px;
    padding: 0;
    line-height: 1.6;
  }
  body.responsive #arbeiten .zeile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 36px;
    gap: 12px;
  }
  body.responsive #arbeiten .zeile .sp1,
  body.responsive #arbeiten .zeile .sp2 {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  body.responsive #arbeiten .zeile .sp2 img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }
  /* Match the homepage's angular, open outline on this article. */
  body.responsive:has(#arbeiten) #wrapper {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto auto;
    width: calc(100% - 24px);
    margin: 10px auto 24px;
    border: 0;
    min-height: 0;
  }
  body.responsive:has(#arbeiten) #wrapper > .site-header {
    grid-row: 1;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 0;
    min-height: 0;
  }
  body.responsive:has(#arbeiten) .site-header #top-menu-r { display: none; }
  body.responsive:has(#arbeiten) .site-header #top-menu-l {
    min-height: 0;
    padding: 0 7px;
  }
  body.responsive:has(#arbeiten) .site-header #top-menu-l ul { padding: 8px 0 4px; }
  body.responsive:has(#arbeiten) .site-header #top-menu-l ul a { padding: 7px 8px; }
  body.responsive:has(#arbeiten) #wrapper > .site-header::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:has(#arbeiten) #wrapper > .site-header::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:has(#arbeiten) #breadcrumbs {
    grid-row: 2;
    border: 0;
    margin-top: 14px;
  }
  body.responsive:has(#arbeiten) #menu-right {
    grid-row: 3;
    border: 0;
    padding-top: 0;
    padding-bottom: 6px;
  }
  body.responsive:has(#arbeiten) #content {
    grid-row: 4;
    min-height: 0;
    padding: 20px 16px 35px;
    border: 0;
    overflow-x: hidden;
  }
  body.responsive:has(#arbeiten) #wrapper > .site-footer {
    grid-row: 5;
    position: relative;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    border: 0;
    justify-content: flex-end;
    align-items: center;
  }
  body.responsive:has(#arbeiten) #footer_l { flex: 0 1 auto; width: auto; }
  body.responsive:has(#arbeiten) #footer_r {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive:has(#arbeiten) #wrapper > .site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:has(#arbeiten) #wrapper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }
}


/* v7: Mobile works hierarchy: the thumbnails ARE the decade/year navigation.
   Keep only the three category links in the Joomla sidebar; preserve breadcrumbs. */
@media (max-width: 767px) {
  body.responsive.is-art-gallery #wrapper {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    width: calc(100% - 24px);
    margin: 10px auto 24px;
    border: 0;
    min-height: 0;
  }
  body.responsive.is-art-gallery #wrapper > .site-header {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 0;
  }
  body.responsive.is-art-gallery .site-header #top-menu-r { display: none; }
  body.responsive.is-art-gallery .site-header #top-menu-l {
    min-height: 0;
    padding: 0 7px;
  }
  body.responsive.is-art-gallery .site-header #top-menu-l ul { padding: 8px 0 4px; }
  body.responsive.is-art-gallery .site-header #top-menu-l ul a { padding: 7px 8px; }
  body.responsive.is-art-gallery #wrapper > .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-art-gallery #wrapper > .site-header::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-art-gallery #breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    margin-top: 14px;
    border: 0;
  }
  body.responsive.is-art-gallery #menu-right {
    grid-column: 1;
    grid-row: 3;
    display: block;
    border: 0;
    padding: 0 14px 4px;
    overflow: visible;
  }
  body.responsive.is-art-gallery #menu-right ul,
  body.responsive.is-art-gallery #menu-right #mod-menu111 {
    display: flex;
    flex-flow: row wrap;
    gap: 4px 18px;
    padding: 0;
    margin: 0;
  }
  body.responsive.is-art-gallery #menu-right li {
    display: none !important;
  }
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/malerei"]),
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/zeichnung"]),
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/architektur"]) {
    display: block !important;
    flex: none !important;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }
  /* Hide nested decade/year links from the visible category menu. */
  body.responsive.is-art-gallery #menu-right li > ul { display: none !important; }
  body.responsive.is-art-gallery #menu-right li > a { padding: 7px 0; }
  body.responsive.is-art-gallery #content {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
    min-height: 0;
    border: 0;
    padding: 18px 16px 30px;
    overflow-x: hidden;
  }
  /* The legacy grid floated fixed-width blocks; switch painting and drawing
     overviews to a balanced, flexible 2-column display. */
  body.responsive.is-art-gallery .mal_ueb_container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 22px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 30px;
  }
  body.responsive.is-art-gallery .mal_ueb_container > a {
    display: block;
    min-width: 0;
    text-align: center;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper {
    box-sizing: border-box;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .bild {
    box-sizing: border-box;
    width: 100%;
    height: 146px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .bild img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .jahr {
    height: auto;
    min-height: 0;
    line-height: 1.5;
    padding-top: 5px;
  }
  /* Replace the original 845px two-cell portrait/quote table with a column. */
  body.responsive.is-art-gallery #aktuelles {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 30px !important;
  }
  body.responsive.is-art-gallery #aktuelles .zeile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    max-width: 100%;
  }
  body.responsive.is-art-gallery #aktuelles .zeile .sp1,
  body.responsive.is-art-gallery #aktuelles .zeile .sp2 {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  body.responsive.is-art-gallery #aktuelles .zeile .sp1 img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }
  body.responsive.is-art-gallery #aktuelles .zeile .sp2 {
    line-height: 1.6;
    overflow-wrap: normal;
  }
  body.responsive.is-art-gallery #wrapper > .site-footer {
    grid-column: 1;
    grid-row: 5;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    margin: 0;
    border: 0;
  }
  body.responsive.is-art-gallery #footer_l { flex: 0 1 auto; width: auto; }
  body.responsive.is-art-gallery #footer_r {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive.is-art-gallery #wrapper > .site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-art-gallery #wrapper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }
}

/* Herbert Plonske biography — smartphone chronology and portraits.
   The original desktop .sp-re column is preserved unchanged. */
.vita .vita-mobile-photo { display: none; }
@media (max-width: 767px) {
  body.responsive .vita {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  body.responsive .vita .sp-li {
    float: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body.responsive .vita .sp-li .sp-li-zeile {
    float: none;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    column-gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    align-items: start;
  }
  body.responsive .vita .sp-li .sp-li-zeile .sp1,
  body.responsive .vita .sp-li .sp-li-zeile .sp2 {
    box-sizing: border-box;
    display: block;
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-wrap: break-word;
  }
  body.responsive .vita .sp-re { display: none; }
  body.responsive .vita .vita-mobile-photo {
    display: block;
    margin: 2px 0 22px 55px;
    max-width: calc(100% - 55px);
  }
  body.responsive .vita .vita-mobile-photo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 210px;
  }
  /* Remove the redundant top-right Startseite row on this article. */
  body.responsive:has(.vita) .site-header #top-menu-r { display: none; }
  body.responsive:has(.vita) .site-header #top-menu-l { border: 0; }
  body.responsive:has(.vita) #breadcrumbs { border: 0; }
  body.responsive:has(.vita) #menu-right { border: 0; }
}

/* Shared open phone frame: the five section-specific copies were identical.
   Article-specific rules are intentionally retained below. */
@media (max-width: 767px) {
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper {
    position: relative; box-sizing: border-box; display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    width: calc(100% - 24px); margin: 10px auto 24px;
    border: 0; min-height: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header {
    grid-column: 1; grid-row: 1; position: relative; box-sizing: border-box;
    border-top: 1px solid #777; border-left: 1px solid #777; border-right: 0;
    border-bottom: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) .site-header #top-menu-r { display: none; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) .site-header #top-menu-l {
    min-height: 0; padding: 0 7px; border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) .site-header #top-menu-l ul { padding: 8px 0 4px; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) .site-header #top-menu-l ul a { padding: 7px 8px; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header::after {
    content: ''; position: absolute; left: 0; bottom: -10px;
    width: 72px; border-bottom: 1px solid #777; pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header::before {
    content: ''; position: absolute; left: -1px; bottom: -10px;
    height: 10px; border-left: 1px solid #777; pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #breadcrumbs {
    grid-column: 1; grid-row: 2; margin-top: 14px; border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right {
    grid-column: 1; grid-row: 3; display: block; border: 0;
    padding: 0 14px 4px; overflow: visible;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right ul {
    display: flex; flex-flow: row wrap; gap: 4px 18px; padding: 0; margin: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li {
    flex: none; width: auto; height: auto; margin: 0; padding: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li > ul { display: none; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li > a { padding: 7px 0; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #content {
    grid-column: 1; grid-row: 4; min-width: 0; min-height: 0;
    border: 0; padding: 18px 16px 30px; overflow-x: hidden;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-footer {
    grid-column: 1; grid-row: 5; position: relative; display: flex;
    justify-content: flex-end; align-items: center; box-sizing: border-box;
    height: 40px; min-height: 40px; margin: 0; border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #footer_l { flex: 0 1 auto; width: auto; }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #footer_r {
    flex: 0 0 auto; width: auto; min-height: 0; height: auto;
    padding: 5px 34px 5px 4px; line-height: 20px; background: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-footer::after {
    content: ''; position: absolute; right: 0; top: 50%; width: 21px;
    border-top: 1px solid #777; pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 20px;
    border-right: 1px solid #777; pointer-events: none;
  }
}

/* v11: Ausstellungen – preserve desktop table layout, mobile readable entries. */
@media (max-width: 767px) {
  body.responsive.is-herbert-section #ausstellungen {
    display: block;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 15px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 34px;
    align-items: start;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1,
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp2,
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp3 {
    display: block;
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp2 {
    grid-column: 1;
    grid-row: 1;
    font-weight: bold;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp3 {
    grid-column: 2;
    grid-row: 1;
    overflow-wrap: anywhere;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1 {
    grid-column: 2;
    grid-row: 2;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1:not(:has(img)) {
    display: none;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1 img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }
}

/* v12: Textliches — override the article's fixed desktop width and offset on phones only. */
@media (max-width: 767px) {
  body.responsive.is-herbert-section #content div[style*="width: 500px"][style*="margin-left: 160px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }
}




@media (max-width: 767px) {
  body.responsive.is-aktuelles-section #aktuelles,
  body.responsive.is-aktuelles-section #aktuelles .zeile {
    display: block;
    width: 100%; max-width: 100%; min-width: 0;
    height: auto; margin: 0; padding: 0;
    box-sizing: border-box;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp1,
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp2 {
    display: block; float: none; position: static;
    width: 100%; max-width: 100%; min-width: 0; height: auto;
    margin: 0; padding: 0; box-sizing: border-box;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp1 img {
    display: block; width: auto; height: auto; max-width: 100%;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp2 {
    margin-top: 12px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
}




/* v14: Projects — stack each image with its accompanying quotation/text. */
@media (max-width: 767px) {
  body.responsive.is-projekte-section #projekte,
  body.responsive.is-projekte-section #durchfuerung,
  body.responsive.is-projekte-section #projekte .zeile,
  body.responsive.is-projekte-section #durchfuerung .zeile {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    min-width: 0; height: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding: 0 !important; box-sizing: border-box;
  }
  body.responsive.is-projekte-section #projekte .zeile > .sp1,
  body.responsive.is-projekte-section #projekte .zeile > .sp2,
  body.responsive.is-projekte-section #durchfuerung .zeile > .sp1,
  body.responsive.is-projekte-section #durchfuerung .zeile > .sp2 {
    display: block !important;
    position: static !important; float: none !important;
    width: 100% !important; max-width: 100% !important;
    min-width: 0; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    box-sizing: border-box; overflow-wrap: anywhere;
  }
  body.responsive.is-projekte-section #projekte .zeile > .sp1 img,
  body.responsive.is-projekte-section #durchfuerung .zeile > .sp1 img {
    display: block; width: auto !important;
    max-width: 100% !important; height: auto !important;
    margin: 0; object-fit: contain;
  }
  body.responsive.is-projekte-section #projekte .zeile > .sp2,
  body.responsive.is-projekte-section #durchfuerung .zeile > .sp2 {
    margin-top: 20px !important; line-height: 1.45;
  }
  body.responsive.is-projekte-section #durchfuerung .zeile > .sp2 p {
    max-width: 100%; overflow-wrap: break-word;
  }
}




@media (max-width: 767px) {
  body.responsive.is-guestbook-section #menu-right { display: none; }
  body.responsive.is-guestbook-section #content { grid-row: 3; padding-top: 18px; padding-bottom: 30px; }
  body.responsive.is-guestbook-section #wrapper > .site-footer { grid-row: 4; }
}

/* v15: Phoca Guestbook entries / form. No extension file modifications. */
@media (max-width: 767px) {
  body.responsive.is-guestbook-section #content { overflow-x: visible; }
  body.responsive.is-guestbook-section #content .pgwell,
  body.responsive.is-guestbook-section #content .well.pgwell {
    box-sizing: border-box !important; display: block !important; float: none !important;
    position: static !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; height: auto !important;
    margin: 0 0 20px !important; padding: 12px !important;
    overflow-wrap: anywhere;
  }
  body.responsive.is-guestbook-section #content .pgwell .pgtitle,
  body.responsive.is-guestbook-section #content .pgwell .pgblockquote,
  body.responsive.is-guestbook-section #content .pgwell .pgb-content-inside {
    box-sizing: border-box !important; width: auto !important; max-width: 100% !important;
    min-width: 0 !important; height: auto !important;
    float: none !important; margin-left: 0 !important; margin-right: 0 !important;
    overflow-wrap: anywhere; white-space: normal;
  }
  body.responsive.is-guestbook-section #content .pgwell .pgblockquote {
    margin-top: 10px !important; padding: 0 0 0 12px !important;
  }
  body.responsive.is-guestbook-section #content input:not([type=checkbox]):not([type=radio]),
  body.responsive.is-guestbook-section #content textarea,
  body.responsive.is-guestbook-section #content select {
    box-sizing: border-box; max-width: 100%;
  }
}





@media (max-width: 767px) {
  body.responsive.is-static-info-section #menu-right { display: none; }
  body.responsive.is-static-info-section #content { grid-row: 3; }
  body.responsive.is-static-info-section #wrapper > .site-footer { grid-row: 4; }
}


/* v16: Links article — semantic markup, desktop image left and link list right */
body.is-static-info-section #content .plonske-links {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas: 'picture list';
  column-gap: 28px;
  align-items: start;
  max-width: 760px;
  margin: 45px 0 0;
}
body.is-static-info-section #content .plonske-links__list {
  grid-area: list; min-width: 0;
}
body.is-static-info-section #content .plonske-links__item {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 12px; margin-bottom: 16px;
}
body.is-static-info-section #content .plonske-links__item a {
  overflow-wrap: anywhere;
}
body.is-static-info-section #content .plonske-links__artwork {
  grid-area: picture;
}
body.is-static-info-section #content .plonske-links__artwork img {
  display: block; width: 110px; height: auto; max-width: 100%;
}
@media (max-width: 767px) {
  body.responsive.is-static-info-section #content .plonske-links {
    display: flex; flex-direction: column; gap: 0;
    width: 100%; max-width: 100%; margin: 0;
  }
  body.responsive.is-static-info-section #content .plonske-links__list {
    width: 100%;
  }
  body.responsive.is-static-info-section #content .plonske-links__item {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; margin: 0 0 20px; min-width: 0;
  }
  body.responsive.is-static-info-section #content .plonske-links__item > * {
    overflow-wrap: anywhere; max-width: 100%;
  }
  body.responsive.is-static-info-section #content .plonske-links__artwork {
    align-self: center; margin: 12px 0 4px;
  }
  body.responsive.is-static-info-section #content .plonske-links__artwork img {
    width: 110px; max-width: 100%; height: auto;
  }
  /* Impressum: inline-width desktop float columns become stacked, copy first */
  body.responsive.is-static-info-section #content .table > .row {
    display: flex !important; flex-direction: column; width: 100%;
    max-width: 100%; margin: 0; min-width: 0;
  }
  body.responsive.is-static-info-section #content .table > .row > div[style*="float: left"] {
    float: none !important; display: block !important;
    width: 100% !important; max-width: 100% !important;
    min-width: 0; box-sizing: border-box; margin: 0 !important;
    overflow-wrap: anywhere;
  }
  body.responsive.is-static-info-section #content .table > .row > div:has(> p > img) {
    order: 2; text-align: center; padding-top: 18px;
  }
  body.responsive.is-static-info-section #content .table > .row > div:has(> p > img) img {
    display: inline-block; width: auto; max-width: 100%; height: auto;
  }
  body.responsive.is-static-info-section #content .table > .row > div:not(:has(> p > img)) {
    order: 1;
  }
}


/* v17 — TABLET ART PAGES (768–1079px).
   The primary header stays in its desktop single-row configuration.
   Only the artwork/content columns and contextual navigation switch to
   the proven compact responsive composition. Phone CSS is unaffected. */
@media (min-width: 768px) and (max-width: 1079px) {
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 10px auto 24px;
    border: 0;
  }

  /* Keep the tablet header horizontal, but use the familiar open border. */
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper > .site-header {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 0;
    border-bottom: 0;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper > .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper > .site-header::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  /* Retain the tablet header, including its Startseite link. */
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 14px;
    border: 0;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #menu-right {
    grid-column: 1;
    grid-row: 3;
    position: static;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 22px 6px;
    border: 0;
    overflow: visible;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #menu-right ul,
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #menu-right #mod-menu111 {
    display: flex;
    flex-flow: row wrap;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #menu-right li {
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #menu-right li > a {
    display: inline-block;
    padding: 7px 0;
  }
  /* Decade/year links already exist as clickable thumbnails and breadcrumbs. */
  body.responsive.is-art-gallery #menu-right li { display: none !important; }
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/malerei"]),
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/zeichnung"]),
  body.responsive.is-art-gallery #menu-right li:has(> a[href$="/architektur"]) {
    display: block !important;
  }
  body.responsive.is-art-gallery #menu-right li > ul { display: none !important; }

  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #content {
    grid-column: 1;
    grid-row: 4;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 24px 28px 35px;
    border: 0;
    overflow-x: hidden;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #content img:not(.pswp__img) {
    max-width: 100%;
    height: auto;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper > .site-footer {
    grid-column: 1;
    grid-row: 5;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    border: 0;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #footer_l {
    flex: 0 1 auto;
    width: auto;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #footer_r {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper > .site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:is(.is-art-gallery, :has(#arbeiten)) #wrapper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }

  /* Arbeiten landing page: avoid the overlapping right-side navigation. */
  body.responsive #arbeiten,
  body.responsive #arbeiten .zeile {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  body.responsive #arbeiten .zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 38%);
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
  }
  body.responsive #arbeiten .zeile .sp1,
  body.responsive #arbeiten .zeile .sp2 {
    float: none;
    position: static;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  body.responsive #arbeiten .zeile .sp2 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Gallery decade overview: at 820px four thumbnail columns still fit. */
  body.responsive.is-art-gallery .mal_ueb_container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 22px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 30px;
  }
  body.responsive.is-art-gallery .mal_ueb_container > a { min-width: 0; text-align: center; }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .bild {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 130px;
    overflow: hidden;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .bild img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  body.responsive.is-art-gallery .mal_ueb_container .wrapper .jahr {
    height: auto;
    min-height: 0;
    padding-top: 5px;
  }

  /* Supplementary artist portrait / quotation: stack to prevent right overflow. */
  body.responsive.is-art-gallery #aktuelles {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 40px !important;
  }
  body.responsive.is-art-gallery #aktuelles .zeile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  body.responsive.is-art-gallery #aktuelles .zeile .sp1,
  body.responsive.is-art-gallery #aktuelles .zeile .sp2 {
    display: block;
    float: none;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  body.responsive.is-art-gallery #aktuelles .zeile .sp1 img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

/* v17: Remove legacy menu decoration in tablet layout */
@media (min-width: 768px) and (max-width: 1079px) {
    body.responsive #top-menu-l,
    body.responsive #top-menu-r {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.responsive #top-menu-l::before,
    body.responsive #top-menu-l::after,
    body.responsive #top-menu-r::before,
    body.responsive #top-menu-r::after {
        content: none !important;
        display: none !important;
    }
}/* v18 — UNIFIED TABLET INTERIOR LAYOUT (768–1079px)
   Shared angular frame for the sections that were not included in v17.
   Existing v17 Arbeiten / galleries, phone rules and desktop rules stay intact. */
@media (min-width: 768px) and (max-width: 1079px) {
  /* One responsive skeleton; the original single-row tablet header remains. */
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 10px auto 24px;
    border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 0;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-header::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 14px;
    border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right {
    grid-column: 1;
    grid-row: 3;
    display: block;
    position: static;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 22px 6px;
    border: 0;
    background: none;
    overflow: visible;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right ul,
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right #mod-menu111 {
    display: flex;
    flex-flow: row wrap;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li {
    display: block;
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li > ul {
    display: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #menu-right li > a {
    display: inline-block;
    padding: 7px 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #content {
    grid-column: 1;
    grid-row: 4;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 24px 28px 35px;
    border: 0;
    overflow-x: hidden;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #content img:not(.pswp__img) {
    max-width: 100%;
    height: auto;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-footer {
    grid-column: 1;
    grid-row: 5;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    border: 0;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #footer_l {
    flex: 0 1 auto;
    width: auto;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #footer_r {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper > .site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
  body.responsive:is(.is-herbert-section, .is-aktuelles-section, .is-projekte-section, .is-guestbook-section, .is-static-info-section) #wrapper::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }

  /* No secondary menu on these sections: avoid an empty grid track. */
  body.responsive:is(.is-guestbook-section, .is-static-info-section) #menu-right { display: none; }
  body.responsive:is(.is-guestbook-section, .is-static-info-section) #content { grid-row: 3; }
  body.responsive:is(.is-guestbook-section, .is-static-info-section) #wrapper > .site-footer { grid-row: 4; }

  /* Aktuelles landing: image above quotation, no collision with the frame. */
  body.responsive.is-aktuelles-section #aktuelles,
  body.responsive.is-aktuelles-section #aktuelles .zeile {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp1,
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp2 {
    display: block;
    position: static;
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp1 img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }
  body.responsive.is-aktuelles-section #aktuelles .zeile > .sp2 {
    margin-top: 14px;
    line-height: 1.5;
  }
  /* In Arbeit / Hinweise: legacy fixed-height blocks and floated 400px columns. */
  body.responsive.is-aktuelles-section #content div[style*="margin-bottom: 50px"][style*="height:"] {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 38px !important;
  }
  body.responsive.is-aktuelles-section #content div[style*="margin-bottom: 50px"][style*="height:"] > div {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  body.responsive.is-aktuelles-section #content div[style*="margin-bottom: 50px"][style*="height:"] img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }
  body.responsive.is-aktuelles-section #content img[src*="exploring_humanity"] {
    max-width: min(100%, 260px);
  }

  /* Projekte: image first, readable full-width text underneath. */
  body.responsive.is-projekte-section :is(#projekte, #durchfuerung),
  body.responsive.is-projekte-section :is(#projekte, #durchfuerung) .zeile {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.responsive.is-projekte-section :is(#projekte, #durchfuerung) .zeile > :is(.sp1, .sp2) {
    display: block !important;
    position: static !important;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.responsive.is-projekte-section :is(#projekte, #durchfuerung) .zeile > .sp1 img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
  body.responsive.is-projekte-section :is(#projekte, #durchfuerung) .zeile > .sp2 {
    margin-top: 20px !important;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  /* Herbert: chronology + the photographs already inserted for phone rendering. */
  body.responsive.is-herbert-section .vita {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  body.responsive.is-herbert-section .vita .sp-li {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  body.responsive.is-herbert-section .vita .sp-li .sp-li-zeile {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
  }
  body.responsive.is-herbert-section .vita .sp-li .sp-li-zeile > :is(.sp1, .sp2) {
    display: block;
    float: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-wrap: break-word;
  }
  body.responsive.is-herbert-section .vita .sp-re { display: none; }
  body.responsive.is-herbert-section .vita .vita-mobile-photo {
    display: block;
    max-width: calc(100% - 69px);
    margin: 4px 0 20px 69px;
  }
  body.responsive.is-herbert-section .vita .vita-mobile-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 210px;
    height: auto;
  }
  /* Exhibition years and descriptions, with posters beneath descriptions. */
  body.responsive.is-herbert-section #ausstellungen {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 15px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 34px;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > :is(.sp1, .sp2, .sp3) {
    display: block;
    float: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp2 {
    grid-column: 1;
    grid-row: 1;
    font-weight: bold;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp3 {
    grid-column: 2;
    grid-row: 1;
    overflow-wrap: break-word;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1 {
    grid-column: 2;
    grid-row: 2;
  }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1:not(:has(img)) { display: none; }
  body.responsive.is-herbert-section #ausstellungen .zeile > .sp1 img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }
  /* Textliches retains inline desktop width unless explicitly overridden. */
  body.responsive.is-herbert-section #content div[style*="500px"] {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  /* Guestbook: reuse the proven phone styling at tablet widths. */
  body.responsive.is-guestbook-section #content { overflow-x: visible; }
  body.responsive.is-guestbook-section #content .pgwell {
    display: block !important;
    float: none !important;
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 20px !important;
    padding: 18px 20px !important;
    overflow-wrap: anywhere;
  }
  body.responsive.is-guestbook-section #content .pgwell :is(.pgtitle, .pgblockquote) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body.responsive.is-guestbook-section #content .pgwell .pgtitle { margin-bottom: 16px !important; }
  body.responsive.is-guestbook-section #content .pgwell .pgb-content-inside { overflow-wrap: anywhere; }
  body.responsive.is-guestbook-section #pgbadminForm,
  body.responsive.is-guestbook-section #pgbadminForm .pgcenter,
  body.responsive.is-guestbook-section #pgbadminForm div.pagination,
  body.responsive.is-guestbook-section #pg-pagination,
  body.responsive.is-guestbook-section #pg-pagination .pagination__wrapper {
    display: block !important;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  body.responsive.is-guestbook-section #pg-pagination ul.pagination {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none;
  }
  body.responsive.is-guestbook-section #pg-pagination li.page-item {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.responsive.is-guestbook-section #pg-pagination .page-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    min-height: 36px;
    padding: 4px 7px;
    margin: 0 !important;
    white-space: nowrap;
    border: 1px solid #777 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.responsive.is-guestbook-section #pgbadminForm .pagecounter {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    text-align: center !important;
  }
  body.responsive.is-guestbook-section #content :is(input, textarea, select) {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Links and Impressum: texts first, small decoration below. */
  body.responsive.is-static-info-section #content .plonske-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  body.responsive.is-static-info-section #content .plonske-links__list { width: 100%; }
  body.responsive.is-static-info-section #content .plonske-links__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 20px;
    min-width: 0;
  }
  body.responsive.is-static-info-section #content .plonske-links__item > * { max-width: 100%; overflow-wrap: anywhere; }
  body.responsive.is-static-info-section #content .plonske-links__artwork {
    align-self: center;
    margin: 12px 0 4px;
  }
  body.responsive.is-static-info-section #content .plonske-links__artwork img {
    display: block;
    width: 110px;
    max-width: 100%;
    height: auto;
  }
  body.responsive.is-static-info-section #content .table > .row {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.responsive.is-static-info-section #content .table > .row > div[style*="float: left"] {
    display: block !important;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }
  body.responsive.is-static-info-section #content .table > .row > div:has(> p > img) {
    order: 2;
    text-align: center;
    padding-top: 18px;
  }
  body.responsive.is-static-info-section #content .table > .row > div:has(> p > img) img {
    display: block;
    width: 105px !important;
    max-width: 105px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  body.responsive.is-static-info-section #content .table > .row > div:not(:has(> p > img)) { order: 1; }
}


/* v19 — Tablet home frame and conservative artwork sizing refinements.
   Applied after v18; no changes to existing phone rules or desktop >=1080px. */
@media (min-width: 768px) and (max-width: 1079px) {
  /* Home uses the same open frame as the other tablet pages. */
  body.responsive.is-home #wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 10px auto 24px;
    border: 0;
  }
  body.responsive.is-home #wrapper > .site-header {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
  }
  body.responsive.is-home #wrapper > .site-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 72px;
    border-bottom: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-home #wrapper > .site-header::before {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -10px;
    height: 10px;
    border-left: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-home #breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin-top: 14px;
    border: 0;
  }
  body.responsive.is-home #menu-right { display: none; }
  body.responsive.is-home #content {
    grid-column: 1;
    grid-row: 3;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 32px 28px 45px;
    overflow-x: hidden;
  }
  body.responsive.is-home #content img { max-width: 100%; height: auto; }
  body.responsive.is-home #wrapper > .site-footer {
    grid-column: 1;
    grid-row: 4;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 40px;
    height: 40px;
    margin: 0;
    border: 0;
  }
  body.responsive.is-home #footer_l { flex: 0 1 auto; width: auto; }
  body.responsive.is-home #footer_r {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 5px 34px 5px 4px;
    line-height: 20px;
    background: none;
  }
  body.responsive.is-home #wrapper > .site-footer::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 21px;
    border-top: 1px solid #777;
    pointer-events: none;
  }
  body.responsive.is-home #wrapper::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 20px;
    border-right: 1px solid #777;
    pointer-events: none;
  }

  /* Aktuelles: honor the actual authored dimensions, not a stretched column. */
  body.responsive.is-aktuelles-section #content img[src*="exploring_humanity"] {
    display: block;
    width: auto !important;
    max-width: min(100%, 260px) !important;
    height: auto !important;
    margin-inline: 0;
  }
  body.responsive.is-aktuelles-section #content img[src*="zeitfaengerbild"] {
    display: block;
    width: auto !important;
    max-width: min(100%, 351px) !important;
    height: auto !important;
  }
}

/* Impressum: match the original desktop display box (105 × 254),
   rather than enlarging/reflowing the decorative image. */
@media (max-width: 1079px) {
  body.responsive.is-static-info-section #content
  img[src*="impressum_leuchter-4"] {
    display: block !important;
    width: 105px !important;
    max-width: 105px !important;
    height: 254px !important;
    max-height: 254px !important;
    object-fit: contain;
    margin-inline: auto !important;
  }
}