/* Magnolia integration. Original style.css remains unchanged. */
.contact-info a { overflow-wrap:anywhere; }
.language-de { background:url('../img/de.png') no-repeat; width:22px; height:14px; }
.language-en { background:url('../img/gb.png') no-repeat; width:22px; height:14px; }
#main-nav li:focus-within > ul, #main-nav li:hover > ul { display:block; }
#main-nav .mobile-navigation { display:none; }
.johnen-carousel { max-height:none; background:none; position:relative; }
.johnen-carousel .slide { display:block; position:relative; }
.johnen-carousel .slide-bg-image { aspect-ratio:47 / 19; object-fit:contain; display:block; }
.johnen-carousel .slide-content { display:none; }
.johnen-carousel.is-ready .slide { display:none; }
.johnen-carousel.is-ready .slide.is-active { display:block; }
.johnen-carousel.is-ready .slide .slide-button { display:none; }
.johnen-carousel.is-ready .slide-content { display:block; position:absolute; left:30px; bottom:30px; background:rgba(0,0,0,.6); padding:25px 30px 30px; width:255px; }
.johnen-carousel.hide-content .slide-content { display:none; }
.johnen-carousel .image-credit { color:#8f8f8f; font-size:11px; }
.johnen-carousel .buttons-container { display:flex; }
.johnen-carousel .buttons-container button { border-left:0; border-right:0; font-family:inherit; text-transform:none; flex:1; width:0; box-sizing:border-box; height:85px; padding:20px; }
.johnen-carousel .buttons-container button.active { border-top-color:#f15a23; background:#f0f0f0; }
.johnen-carousel .buttons-container button.active h5 { color:#f15a23; }
.johnen-carousel .buttons-container button .dropcap { margin-right:7px; }
.johnen-carousel.is-editing .slide { display:block; }
.johnen-carousel.is-editing .slide-button { width:auto; float:none; }
.johnen-preview { position:relative; }
.johnen-preview .jcarousel-container { margin:15px 0 80px; position:relative; }
.johnen-preview ul { display:flex; gap:20px; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; list-style:none; }
.johnen-preview ul::-webkit-scrollbar { display:none; }
.johnen-preview ul > li { flex:0 0 220px; margin:0; scroll-snap-align:start; position:relative; }
.johnen-preview .projects-carousel img { width:220px; height:140px; object-fit:cover; }
.johnen-preview .post-carousel .entry-image { height:auto; display:block; }
.johnen-preview .jcarousel-prev, .johnen-preview .jcarousel-next { border:0; padding:0; font-size:0; }
.johnen-preview .projects-carousel img { margin:-25px auto 20px; }
@media only screen and (max-width:767px) {
  #main-nav .mobile-navigation { display:block; width:100%; }
  .johnen-preview ul > li { flex-basis:100%; }

  .johnen-carousel .buttons-container { display:none; }
  .johnen-carousel.is-ready .slide-content { display:none; }
  .johnen-carousel .mobile-slider-controls { display:flex; gap:4px; position:absolute; bottom:8px; right:8px; }
}
@media only screen and (min-width:768px) { .mobile-slider-controls { display:none; } }

.mobile-slider-controls button { width:19px; height:19px; padding:0; border:0; font-size:0; background:#ddd url('../img/button-arrows.png') no-repeat 0 0; }
.mobile-slider-controls button:first-child { background-position:0 -19px; }
.mobile-slider-controls button:hover { background-color:#f15a23; }

.johnen-record figure { max-width:100%; margin:0 0 25px; }
.johnen-record figure img { max-width:100%; height:auto; }
.johnen-record figcaption { font-size:11px; color:#959393; }
.johnen-record-list .entry-image { max-width:220px; float:left; margin:0 25px 20px 0; }
.johnen-record-list .entry { overflow:hidden; }
@media(max-width:767px) { .johnen-record-list .entry-image { float:none; margin:0 auto 20px; } }

.johnen-record.entry { max-width:680px; }
.johnen-record .entry-image { max-width:100%; height:auto; }
.johnen-record #main .image-gallery-slider ul { list-style:none; margin:0; padding:0; }
.johnen-record #main .image-gallery-slider li { margin:0; }
@media(max-width:767px) { .johnen-record .entry-body { width:255px; } .johnen-record .entry-meta { width:33px; margin-right:12px; } }

/* Original portfolio cards, with native grid replacing the Isotope layout. */
#portfolio-items.johnen-project-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:50px 20px; align-items:start; margin:0 0 40px; }
#portfolio-items.johnen-project-grid > article { width:auto; margin:0; float:none; }
#portfolio-items.johnen-project-grid > article[hidden] { display:none; }
#portfolio-items.johnen-project-grid img { width:220px; height:140px; object-fit:cover; }
@media(max-width:959px) { #portfolio-items.johnen-project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) { #portfolio-items.johnen-project-grid { grid-template-columns:1fr; } #portfolio-items-filter { float:none; margin:0 0 20px; } }

#portfolio-items.johnen-project-grid::after { display:none; content:none; }
#portfolio-items-filter li[hidden] { display:none; }

#portfolio-items.johnen-project-grid { position:relative; }
#portfolio-items-filter.filter-ready li:not(:first-child) { max-width:0; overflow:hidden; opacity:0; transition:max-width 300ms ease,opacity 150ms ease; }
#portfolio-items-filter.filter-ready li.selected,
#portfolio-items-filter.filter-ready.is-open li:not(:first-child) { max-width:180px; opacity:1; }
#portfolio-items-filter.filter-ready a { white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { #portfolio-items-filter.filter-ready li { transition:none; } }

.johnen-lightbox { box-sizing:border-box; border:0; border-radius:3px; padding:40px 20px 16px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); background:#fff; box-shadow:0 8px 40px #0008; }
.johnen-lightbox::backdrop { background:rgba(0,0,0,.8); }
.johnen-lightbox img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 180px); margin:auto; object-fit:contain; }
.johnen-lightbox .lightbox-close { position:absolute; top:4px; right:8px; background:transparent; color:#333; font-size:28px; padding:0 8px; border:0; cursor:pointer; }
.johnen-lightbox .lightbox-caption { margin:12px 0 0; text-align:center; }
.johnen-lightbox .lightbox-controls { display:flex; justify-content:space-between; gap:20px; margin-top:12px; }
.johnen-lightbox .lightbox-controls[hidden] { display:none; }
body:has(.johnen-lightbox[open]) { overflow:hidden; }

/* Use the original theme's translucent overlay and zoom.png plus icon. */
.single-image .zoom { pointer-events:none; }
.single-image:focus-visible .zoom { opacity:1; }
@media(prefers-reduced-motion:reduce) { .single-image .zoom { transition:none; } }

.johnen-carousel .slider-autoplay-control { position:absolute; top:8px; right:8px; z-index:5; padding:4px 10px; border:0; background:#333c; color:#fff; cursor:pointer; }

/* Original stage caption appears over the active image on hover. */
@media(min-width:768px) {
  .johnen-carousel.is-ready.hide-content .slide-content { display:block; opacity:0; visibility:hidden; transform:translateY(15px); pointer-events:none; transition:opacity 450ms ease,transform 450ms ease,visibility 450ms; }
  .johnen-carousel.is-ready.hide-content:hover .slide.is-active .slide-content,
  .johnen-carousel.is-ready.hide-content:focus-within .slide.is-active .slide-content { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
}
@media(prefers-reduced-motion:reduce) { .johnen-carousel.is-ready.hide-content .slide-content { transition:none; transform:none; } }

.johnen-carousel .slide-content .stage-popup-arrow { position:absolute; right:-16px; bottom:0; width:15px; height:50%; padding:0; border:0; cursor:pointer; background:rgba(241,90,35,.6) url('../img/slider-arrows-small.png') no-repeat 0 center; }
.johnen-carousel .slide-content .stage-popup-next { bottom:50%; background-position:-15px center; }
.johnen-carousel .slide-content .stage-popup-arrow:hover,
.johnen-carousel .slide-content .stage-popup-arrow:focus-visible { background-color:rgb(241,90,35); }

/* SmartStart's original element classes, adapted for semantic controls and areas. */
[hidden] { display: none !important; }
.smartstart-accordion,.smartstart-tabs,.smartstart-imageGallery,.smartstart-logoSlider { margin-bottom: 30px; clear: both; }
.acc-trigger button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 16px 20px; text-align: left; width: 100%; }
.acc-trigger button::before { content: '+ '; }
.acc-trigger.active button::before { content: '− '; }
.smartstart-accordion .panel-content { padding: 15px 20px; }
.tabs-nav button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 10px 15px; }
.tabs-nav .active button { color: #f15a23; background: #fafafa; }
.smartstart-tabs .tab-content { padding: 15px; border: 1px solid #eaeaea; }
.smartstart-gallery-item { display: inline-block; vertical-align: top; width: calc(33.333% - 20px); margin: 0 20px 20px 0; }
.smartstart-gallery-item img { max-width: 100%; height: auto; }
.smartstart-logo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; }
.smartstart-logo-track .smartstart-gallery-item { flex: 0 0 180px; margin: 0; scroll-snap-align: start; }
.smartstart-slider-controls { display: flex; gap: 8px; margin-top: 10px; }
.smartstart-slider-controls button { cursor: pointer; padding: 5px 14px; }
.smartstart-pricing .column { flex: 1 1 200px; width: auto; }
.smartstart-profile { width: 100%; }
.smartstart-media { max-width: 100%; width: 100%; margin-bottom: 20px; }
.smartstart-divider { border-top: 1px solid #eaeaea; margin: 25px 0; }
@media (max-width: 600px) { .smartstart-gallery-item { width: 100%; margin-right: 0; } }
.smartstart-map { width: 100%; height: 360px; border: 0; margin-bottom: 20px; }
.smartstart-plans { display: flex; flex-wrap: wrap; width: 100%; }
.contact-form input,.contact-form textarea { box-sizing: border-box; max-width: 100%; }

/* Standalone project narratives keep a readable measure below the separate teaser. */
.profile-project-body { clear: both; float: none; max-width: 760px; margin: 30px auto 0; }
.profile-project-body dl { display: grid; grid-template-columns: 180px 1fr; gap: 5px 12px; }
.profile-project-body dt { font-weight: 600; }
.profile-project-body dd { margin: 0; }
@media (max-width: 480px) { .profile-project-body dl { grid-template-columns: 1fr; } .profile-project-body dd { margin-bottom: 10px; } }

/* Self-hosted C64 component. */
.johnen-c64 { clear: both; margin: 30px 0; }
.johnen-c64-screen { box-sizing: border-box; width: 100%; max-width: 680px; padding: 28px 20px; border: 18px solid #887ecb; background: #40318d; color: #b8adff; font: 16px/1.7 monospace; }
.johnen-c64-screen span { display: block; overflow-wrap: anywhere; }
.johnen-c64-screen span:first-child { margin-bottom: 14px; }
.johnen-c64-help, .johnen-c64-credit { font-size: 12px; color: #666; }
@media (max-width: 480px) { .johnen-c64-screen { border-width: 10px; padding: 18px 12px; font-size: 12px; } }

.johnen-c64-player { width: 100%; max-width: 760px; background: #000; }
.johnen-c64-player iframe { display: block; width: 100%; height: 560px; border: 0; }
.johnen-c64 [hidden] { display: none !important; }
.johnen-c64-credit { margin-top: 12px; }
.johnen-c64-credit p { display: inline; margin: 0; }
@media (max-width: 600px) { .johnen-c64-player iframe { height: 420px; } }

/* Source code stays readable without JavaScript, including indentation and long lines. */
.johnen-source-code { clear: both; margin: 24px 0; min-width: 0; }
.johnen-source-code pre { box-sizing: border-box; max-width: 100%; margin: 0; padding: 16px; overflow-x: auto; border: 1px solid #ddd; border-radius: 3px; background: #f6f8fa; color: #24292e; white-space: pre; tab-size: 4; }
.johnen-source-code pre code { display: block; width: max-content; min-width: 100%; padding: 0; font: 13px/1.6 monospace; white-space: pre; word-break: normal; overflow-wrap: normal; }
.johnen-source-code pre:focus-visible { outline: 2px solid #77a12b; outline-offset: 2px; }