/*
Theme Name: St.Johannes
Theme URI: https://kirchenchor-schwanewede.de/
Author: Kirchenchor Schwanewede
Description: Theme vom Kirchenchor St. Johannes Schwanewede im Gedenken an den Chorleiter Winfried Schwarz.
Version: 7.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: metropolis-wp
License: GPL-2.0-or-later (PHP adaptation); original Joomla51 artwork and styles retain their respective licenses
*/
:root{--metro-blue:#2d4c72;--metro-dark:#1b324d;--metro-accent:#5e88b1;--metro-width:1100px;--metro-bg:#e8ecf0;--metro-font:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--metro-bg) linear-gradient(140deg,#d5dce3,#f1f3f4 65%);font:15px/1.65 var(--metro-font);color:#38434d}a{color:#295d91}a:hover{color:#153d68}img{max-width:100%;height:auto}button,input,textarea,select{font:inherit}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}.screen-reader-text:focus{clip:auto;width:auto;height:auto;z-index:999;position:fixed;background:white;padding:10px}
.metro-shell{width:min(var(--metro-width),calc(100% - 36px));margin:0 auto;box-shadow:0 15px 45px #101d2c30;background:#fff;min-height:80vh}.metro-nav-wrap{background:linear-gradient(#46678e,#274668);border-bottom:4px solid #142a43;box-shadow:0 3px 9px #0003;position:relative;z-index:12;border-radius:0 0 4px 4px}.metro-nav-inner{display:flex;justify-content:space-between;align-items:center;min-height:45px;padding:0 20px}.metro-menu{display:flex;align-items:center;list-style:none;padding:0;margin:0;flex-wrap:wrap}.metro-menu li{position:relative;list-style:none}.metro-menu>li>a{display:block;padding:13px 14px;color:#f4f7fb;text-decoration:none;font-size:13px;border-right:1px solid #ffffff18}.metro-menu>li:hover>a,.metro-menu>.current-menu-item>a,.metro-menu>.current_page_item>a{background:#183a5a}.metro-menu .sub-menu{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:210px;margin:0;padding:5px 0;box-shadow:0 10px 25px #0003;z-index:20;list-style:none}.metro-menu li:hover>.sub-menu,.metro-menu li:focus-within>.sub-menu{display:block}.metro-menu .sub-menu .sub-menu{left:100%;top:0}.metro-menu .sub-menu a{display:block;text-decoration:none;padding:9px 15px;color:#223e5b}.metro-menu .sub-menu a:hover{background:#e8f0f9}.metro-search{display:flex;gap:0;margin:4px 0 4px 16px}.metro-search input{width:150px;max-width:25vw;padding:6px 9px;border:1px solid #7991ac;border-radius:3px 0 0 3px;background:#f1f4f7}.metro-search button{background:#193752;color:#fff;border:0;padding:6px 10px;border-radius:0 3px 3px 0;cursor:pointer}.metro-mobile-toggle{display:none;border:1px solid #a6bbce;color:#fff;background:#234362;padding:8px 12px;border-radius:3px}
.metro-header{padding:27px 34px 22px;background:linear-gradient(#fff,#f4f5f6);border-bottom:1px solid #e0e4e8;text-align:center}.metro-brand{font-size:clamp(32px,5.5vw,56px);font-weight:400;line-height:1.2;letter-spacing:.5px;color:#28496c;text-decoration:none;font-family:Georgia,serif}.metro-brand:hover{color:#28496c}.metro-brand-logo{max-height:112px;width:auto;object-fit:contain}.metro-brand-subtitle{font-size:11px;text-transform:uppercase;letter-spacing:3px;color:#77818b;margin-top:3px}.metro-header-contact{margin-top:10px;font-size:13px;color:#4a5b6b;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}.metro-header-contact a{text-decoration:none}.metro-header-contact a:hover{text-decoration:underline}.metro-rule{display:flex;align-items:center;justify-content:center;gap:17px}.metro-rule:before,.metro-rule:after{content:'';width:14%;height:1px;background:#cfd8e0}
.metro-feature{background:#fff;margin:0;padding:8px 8px 0}.metro-feature-inner{border-top:7px solid var(--metro-blue);border-radius:4px 4px 0 0;overflow:hidden;background:linear-gradient(110deg,#e0e8ef,#fff);min-height:10px}.metro-feature .widget{padding:15px}.metro-content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:12px;padding:9px;background:#dde5ec}.metro-content-wrap.no-sidebar{grid-template-columns:1fr}.metro-main{background:#fff;border:1px solid #cad4de;border-radius:4px;padding:26px 30px;min-width:0}.metro-sidebar{background:linear-gradient(#2d4e74,#203c60);color:#e7eef5;border-radius:4px;padding:13px}.metro-sidebar .widget{margin:0 0 15px;padding:0 0 14px;border-bottom:1px solid #ffffff26}.metro-sidebar h2,.metro-sidebar .widget-title{color:#fff;font:20px Georgia,serif;margin:3px 0 12px}.metro-sidebar a{color:#eaf2fa}.metro-sidebar ul{padding-left:18px}.metro-sidebar li{margin-bottom:7px}.metro-sidebar input{max-width:100%}.metro-content-wrap h1,.metro-content-wrap h2,.metro-content-wrap h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#2e4c70;line-height:1.25}.metro-content-wrap h1{font-size:30px;margin:0 0 15px}.metro-content-wrap h2{font-size:24px}.metro-content-wrap h3{font-size:19px}.metro-entry{margin-bottom:28px}.metro-entry-header{margin-bottom:12px}.metro-entry-title{margin:0}.metro-entry-title a{text-decoration:none}.metro-entry-meta{font-size:12px;color:#87919b;margin:4px 0 12px}.metro-entry-thumb img{width:100%;height:auto;border-radius:3px;margin-bottom:13px}.metro-main p{margin:0 0 1em}.metro-main figure{margin:1.5em 0}.metro-readmore,.metro-main .wp-block-button__link{display:inline-block;background:linear-gradient(#fff,#ebeff3);color:#2b4c71;border:1px solid #c8d4df;border-radius:4px;text-decoration:none;padding:6px 14px;font-size:13px}.metro-readmore:hover{background:#e3ebf4}.metro-divider{border:0;border-top:1px solid #e5e9ec;margin:24px 0}.metro-pagination{margin:24px 0}.metro-pagination .page-numbers{display:inline-block;padding:5px 12px;border:1px solid #ccd7e3;margin:2px}.metro-pagination .current{background:var(--metro-blue);color:#fff}.metro-footer{background:#ecf0f3;padding:24px 30px 16px;border-top:1px solid #c7d0d9}.metro-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.metro-footer .widget-title,.metro-footer h2{font:20px Georgia,serif;color:#2d4c72;margin:0 0 12px}.metro-footer ul{margin:0;padding-left:19px}.metro-bottom{background:#203b5a;padding:12px 27px;color:#cbd7e2;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:12px}.metro-bottom a{color:#eaf1f6}.metro-bottom .metro-menu a{border:0;padding:0 9px;color:#dbe5ee}.metro-banner{background:linear-gradient(115deg,#fff,#eef3f8);padding:25px;border-bottom:1px solid #d1dae4}.metro-banner h2{margin:0 0 5px;font-family:Georgia,serif;color:#315272}.metro-section-title{font:24px Georgia,serif;color:#2e4c70}.metro-post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.metro-post-grid article{border-top:1px solid #d5dfe8;padding-top:14px}.metro-post-grid h3{margin:6px 0}.metro-post-grid img{aspect-ratio:16/9;object-fit:cover;width:100%}.metro-nothing{padding:18px;background:#eff4f9}.metro-skip-link{position:absolute;left:-9999px}.metro-skip-link:focus{left:10px;top:10px;z-index:9999;background:#fff;padding:10px}.alignleft{float:left;margin:0 20px 12px 0}.alignright{float:right;margin:0 0 12px 20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{max-width:100%}.wp-caption-text,.gallery-caption{font-size:12px;color:#777}.sticky{border-left:3px solid var(--metro-blue);padding-left:12px}.bypostauthor{font-weight:inherit}.metro-main iframe{max-width:100%}.wp-block-gallery img{cursor:zoom-in}.metro-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:#000d;align-items:center;justify-content:center;padding:30px}.metro-lightbox.is-open{display:flex}.metro-lightbox img{max-height:90vh;max-width:95vw;object-fit:contain}.metro-lightbox button{position:absolute;right:20px;top:10px;font-size:34px;color:white;border:0;background:transparent;cursor:pointer}
@media(max-width:800px){.metro-shell{width:100%;box-shadow:none}.metro-content-wrap{grid-template-columns:1fr}.metro-footer-grid{grid-template-columns:1fr 1fr}.metro-nav-inner{flex-wrap:wrap}.metro-mobile-toggle{display:block}.metro-menu-holder{display:none;width:100%;order:3}.metro-menu-holder.is-open{display:block}.metro-menu{display:block}.metro-menu>li>a{border:0}.metro-menu .sub-menu{position:static;display:block;box-shadow:none;background:#35597e;padding-left:12px}.metro-menu .sub-menu a{color:#fff}.metro-nav-inner{padding:5px 15px}.metro-search{margin-left:auto}.metro-search input{max-width:40vw}.metro-main{padding:22px}.metro-header{padding:24px 15px}}@media(max-width:520px){.metro-footer-grid,.metro-post-grid{grid-template-columns:1fr}.metro-header-contact{gap:6px;flex-direction:column}.metro-main{padding:18px}.metro-content-wrap{padding:6px}.metro-bottom{padding:16px}.metro-brand{font-size:33px}}

/* Kirchenchor Schwanewede: Joomla51 Metropolis adaptation */
:root{--metro-blue:#52728b;--metro-width:1100px}
.metro-brand{font-size:clamp(28px,4.5vw,46px)}
.metro-header-contact:empty{display:none}
.metro-feature{padding:0;background:#fff}
.metro-feature-inner{border:0;border-radius:0;min-height:0}
.metro-chor-slider{height:auto;aspect-ratio:1000/135;position:relative;overflow:hidden;background:#e7e7e7}
.metro-chor-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.metro-chor-slider img.is-current{opacity:1}
.metro-sidebar h2{font-weight:normal}
.metro-content-menu,.metro-content-pages ul{padding:0;margin:0;list-style:none}
.metro-content-menu li,.metro-content-pages li{list-style:none;padding:5px 0;border-bottom:1px solid #ffffff2e;margin:0}
.metro-content-menu a,.metro-content-pages a{color:#fff;text-decoration:none;display:block}
.metro-content-menu a:hover,.metro-content-pages a:hover{text-decoration:underline}
.metro-sidebar .children,.metro-sidebar .sub-menu{padding-left:12px;margin-top:5px}
.metro-content-wrap{grid-template-columns:minmax(0,1fr) 240px}
@media(max-width:800px){.metro-content-wrap{grid-template-columns:1fr}.metro-sidebar{order:-1}}

/* 1.2 – Joomla51 Metropolis: Originalanordnung und Schatten. */
body {background:#f4f1ea; color:#2d2d2d;}
.metro-shell {--metro-width:960px; background:transparent; box-shadow:none; width:min(var(--metro-width),calc(100% - 30px));}
.metro-nav-wrap {height:60px; border:0; border-bottom:1px solid rgba(0,0,0,.55); border-radius:0 0 10px 10px; background:linear-gradient(to bottom,rgba(27,27,27,.12),rgba(27,27,27,.45)); box-shadow:0 2px 4px rgba(0,0,0,.30),inset 0 -1px 1px rgba(255,255,255,.3);}
.metro-nav-inner {height:60px; min-height:60px; padding:0 20px; justify-content:flex-start;}
.metro-menu {flex-wrap:nowrap;}
.metro-menu>li>a {padding:17px 12px; height:58px; line-height:24px; font-size:13px; letter-spacing:1px; border-right:0; box-shadow:inset 0 0 1px rgba(255,255,255,.4); color:white; white-space:nowrap;}
.metro-menu>li:hover>a,.metro-menu>.current-menu-item>a,.metro-menu>.current_page_item>a,.metro-menu>.current-menu-ancestor>a {background:rgba(0,0,0,.20);box-shadow:inset 2px 1px 3px rgba(0,0,0,.3),inset -2px 1px 3px rgba(0,0,0,.3);}
.metro-menu .sub-menu {background:#eee;border-radius:0 0 5px 5px;box-shadow:0 8px 16px #0004;}
.metro-search {display:none!important;}
.metro-header {height:140px; padding:20px 20px 18px; background:transparent; border:0; text-align:left;}
.metro-header .metro-rule {justify-content:flex-start; display:block;}
.metro-header .metro-rule:before,.metro-header .metro-rule:after {display:none;}
.metro-branding {display:inline-block;max-width:100%;background:linear-gradient(90deg,#e5e5e5,#fff 50%,#e5e5e5);margin:0; padding:12px 25px;box-shadow:0 0 4px rgba(0,0,0,.3),inset 0 0 1px #fff;}
.metro-brand {font-family:Georgia,serif;font-size:clamp(24px,3.2vw,38px);color:#333;line-height:1.2;text-shadow:1px 1px 1px #fff;}
.metro-brand-subtitle {letter-spacing:1px;text-align:left;font-size:12px;margin-top:3px;text-transform:none;color:#666;}
.metro-header-contact:empty {display:none;}
.metro-header-contact {justify-content:flex-start;margin-top:3px;}
.metro-feature {background:transparent;padding:0 1px 9px; border-left:1px solid #999;border-right:1px solid #999;}
.metro-feature-inner {box-shadow:0 0 8px #0005;}
.metro-content-wrap {background:transparent;padding:5px 10px 10px;gap:15px;border-left:1px solid rgba(0,0,0,.4);border-right:1px solid rgba(0,0,0,.4);}
.metro-main {border:0;border-radius:5px;box-shadow:inset 0 0 0 1px #fff,inset 0 0 60px #999,0 0 3px rgba(0,0,0,.8);padding:20px;}
.metro-sidebar {background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px #0004,0 1px 0 #ffffff26;color:#fff;border-radius:5px;}
.metro-footer {border-left:1px solid #777;border-right:1px solid #777;background:#fff;box-shadow:inset 0 0 35px #ccc;}
.metro-bottom {background:#111;box-shadow:0 2px 7px #0003;}
.metro-content-wrap.no-sidebar .metro-main {width:100%;}
@media(max-width:800px){.metro-shell{width:100%}.metro-nav-wrap,.metro-nav-inner{height:auto;min-height:60px}.metro-nav-inner{justify-content:space-between;flex-wrap:wrap}.metro-mobile-toggle{display:block}.metro-menu-holder{width:100%;order:3}.metro-menu{display:block}.metro-menu>li>a{height:auto;padding:10px 12px}.metro-header{height:auto;min-height:135px;padding:20px}.metro-feature{border:0}.metro-content-wrap{border:0}.metro-content-wrap .metro-sidebar{order:-1}}

/* 1.3: Layout nach Originalseite Kirchenchor St. Johannes Schwanewede */
:root {--metro-blue:#203d70;--metro-width:1080px;--metro-bg:#eeece7;}
body {background:#efede8; color:#242424; font:15px/1.34 Arial,Helvetica,sans-serif;}
.metro-shell {width:min(var(--metro-width),calc(100% - 20px));--metro-width:1080px;background:transparent;box-shadow:0 0 4px #0004;min-height:0;}
.metro-nav-wrap {background:linear-gradient(180deg,#233f73 0%,#1a3159 100%);height:60px;border-radius:0 0 10px 10px;border:1px solid #12274c;box-shadow:0 3px 5px #0005;}
.metro-nav-inner {height:58px;min-height:58px;padding:0 20px;}
.metro-menu>li>a {height:57px;padding:18px 13px;font:13px/21px Arial,sans-serif;letter-spacing:.6px;color:white;border-left:1px solid #ffffff0d;border-right:1px solid #091d3b36;}
.metro-menu>li:hover>a,.metro-menu>.current-menu-item>a,.metro-menu>.current_page_item>a,.metro-menu>.current-menu-ancestor>a {background:linear-gradient(#152a52,#1c3768);box-shadow:inset 0 0 8px #0005;}
.metro-header {height:auto;min-height:139px;background:#fff;padding:12px 44px 8px;text-align:left;border-bottom:0;}
.metro-header .metro-rule {display:block;}
.metro-branding {background:transparent;box-shadow:none;padding:0;margin:0;display:block;}
.metro-header .custom-logo-link {display:block;max-width:100%;}
.metro-header .custom-logo {display:block;width:auto;max-width:100%;max-height:118px;object-fit:contain;object-position:left center;}
.metro-header:has(.custom-logo) .metro-brand-subtitle {display:none;}
.metro-brand {font:italic 41px/1.3 Georgia,serif;color:#1e1e1e;text-shadow:none;}
.metro-brand-subtitle {font-size:14px;letter-spacing:0;color:#444;margin-top:4px;}
.metro-header-contact {justify-content:flex-start;margin-top:0;}
.metro-feature {padding:0;background:#203d70;border:0;box-shadow:none;}
.metro-feature-inner {margin:0 0 0;background:#203d70;box-shadow:none;border:0;padding:20px 40px 0;overflow:hidden;}
.metro-chor-slider {aspect-ratio:auto;height:140px;border-radius:10px 10px 0 0;overflow:hidden;background:#1c3155;box-shadow:0 0 1px #fff6;}
.metro-chor-slider img {object-fit:cover;object-position:center 40%;}
.metro-content-wrap {display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;background:#203d70;padding:30px 20px 35px;border:0;box-shadow:none;}
.metro-content-wrap .metro-sidebar {grid-column:1;grid-row:1;order:0;display:block;background:#17294d;color:#adb7ce;border:1px solid #0a1a39;border-radius:5px;padding:18px 19px;box-shadow:none;min-height:250px;}
.metro-content-wrap .metro-main {grid-column:2;grid-row:1;order:1;background:linear-gradient(#e9e9e9 0px,#fff 55px);box-shadow:inset 0 0 65px #0002,0 1px 3px #0007;border:1px solid #e8e8e8;border-radius:5px;padding:18px 20px 24px;min-height:560px;}
.metro-content-wrap.no-sidebar {grid-template-columns:minmax(0,1fr);}
.metro-content-wrap.no-sidebar .metro-main {grid-column:1;}
.metro-sidebar h2,.metro-sidebar .widget-title {font:20px Arial,sans-serif;color:#b2bad0;border-bottom:1px solid #98a1b5;margin:0 0 12px;padding:0 0 7px;}
.metro-sidebar a {color:#99a8c1;text-decoration:none;letter-spacing:1.4px;font-size:13px;}
.metro-sidebar .metro-content-menu,.metro-sidebar .metro-content-pages ul {padding:0;margin:0;list-style:none;}
.metro-sidebar .metro-content-menu li,.metro-sidebar .metro-content-pages li {border:0;padding:5px 0 5px 18px;margin:0;position:relative;}
.metro-sidebar .metro-content-menu li:before,.metro-sidebar .metro-content-pages li:before {content:'›';position:absolute;left:4px;top:3px;color:#9caac2;}
.metro-sidebar .metro-content-menu a:hover,.metro-sidebar .metro-content-pages a:hover {color:#fff;}
.metro-main .metro-entry-title,.metro-content-wrap h1 {font:normal 23px/1.3 Arial,sans-serif;color:#57728f;margin:0 0 32px;}
.metro-main .metro-entry-title a {color:#57728f;}
.metro-main .metro-entry-body {font:15px/1.28 Arial,sans-serif;color:#262626;text-align:justify;}
.metro-main .metro-entry-body p {margin:0 0 16px;}
.metro-main .metro-entry-body img {max-width:100%;height:auto;}
.metro-footer {background:#fff;padding:20px 25px;border:0;box-shadow:inset 0 0 24px #0002;}
.metro-bottom {background:#111;}
@media(max-width:800px){
 .metro-shell {width:100%;}
 .metro-nav-wrap,.metro-nav-inner {height:auto;min-height:55px;}
 .metro-nav-inner {display:flex;flex-wrap:wrap;padding:8px 14px;}
 .metro-mobile-toggle {display:block;}
 .metro-menu-holder {display:none;width:100%;order:3;}
 .metro-menu-holder.is-open {display:block;}
 .metro-menu {display:block;}
 .metro-menu>li>a {height:auto;padding:11px 12px;}
 .metro-header {padding:14px 20px;min-height:90px;}
 .metro-header .custom-logo {max-height:105px;}
 .metro-feature-inner {padding:14px 20px 0;}
 .metro-chor-slider {height:120px;}
 .metro-content-wrap {grid-template-columns:minmax(0,1fr);gap:16px;padding:17px 16px 26px;}
 .metro-content-wrap .metro-sidebar {grid-column:1;grid-row:1;min-height:0;}
 .metro-content-wrap .metro-main {grid-column:1;grid-row:2;min-height:300px;}
 .metro-content-wrap.no-sidebar .metro-main {grid-row:1;}
}
@media(max-width:520px){.metro-feature-inner{padding:10px 12px 0}.metro-content-wrap{padding:12px;}.metro-content-wrap .metro-main{padding:17px}.metro-brand{font-size:29px}}

/* 1.4: Inhaltsnavigation immer links, originales Headerbild, kein Doppelmenue im Footer */
.metro-header {padding:0 20px; min-height:139px; height:auto; background:#fff;}
.metro-header .metro-rule {display:block;}
.metro-header .metro-branding {display:block; padding:0; margin:0; background:none; box-shadow:none;}
.metro-logo-default {display:block; max-width:100%; text-decoration:none;}
.metro-logo-default img {display:block; width:auto; height:auto; max-width:100%; max-height:138px; object-fit:contain; object-position:left center;}
.metro-content-wrap {display:grid!important; grid-template-columns:240px minmax(0,1fr)!important; grid-template-areas:"sidebar content"; align-items:start; gap:20px;}
.metro-content-wrap .metro-sidebar {grid-area:sidebar!important; display:block!important; width:auto!important; min-width:0; margin:0;}
.metro-content-wrap .metro-main {grid-area:content!important; min-width:0; width:auto!important; margin:0;}
.metro-sidebar-widgets {margin-top:18px; border-top:1px solid #8797b6; padding-top:14px;}
.metro-bottom {display:block;}
@media(max-width:800px) {
 .metro-header {padding:0 15px; min-height:0;}
 .metro-content-wrap {grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"sidebar" "content";}
}

/* Version 1.5: hochgeladenes Original-Headerbild, formatgetreu */
.metro-logo-default img{width:100%;height:auto;max-width:1041px;max-height:none;object-fit:contain;object-position:left center;}
.metro-header .metro-branding{width:100%;max-width:1041px;}
@media(max-width:800px){.metro-logo-default img{max-width:100%;}}

/* V1.6: linker Bereich besteht ausschließlich aus der Inhaltsnavigation. */
.metro-sidebar-widgets, .metro-sidebar .widget {display:none!important;}

/* 1.7: accessible, visibly interactive read-more links */
.metro-main a.metro-readmore{display:inline-block;position:relative;z-index:1;cursor:pointer;pointer-events:auto;text-decoration:none;font-weight:600}
.metro-main a.metro-readmore:focus-visible{outline:3px solid #f2d05e;outline-offset:3px}

/* v1.8: no post metadata/date or automatic link below articles */
.metro-entry-meta{display:none!important;}

/* Version 1.9: third independent menu, linked to the existing Footer menu. */
.metro-bottom {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.metro-footer-menu {display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.metro-footer-menu li {list-style:none;margin:0;padding:0;}
.metro-footer-menu a {display:block;color:#eaf1f6;text-decoration:none;padding:2px 0;}
.metro-footer-menu a:hover,.metro-footer-menu .current-menu-item>a {text-decoration:underline;}
@media(max-width:650px){.metro-bottom{display:block}.metro-footer-navigation{margin-top:10px}.metro-footer-menu{gap:10px}}


/* Version 2.0: Fotoarchiv als verlinkte Liste wie im Joomla-Modul. */
.metro-main .metro-fotoserien-list{list-style:disc outside;margin:0 0 1.5em;padding-left:23px;}
.metro-main .metro-fotoserien-list li{margin:0 0 3px;padding:0;line-height:1.5;}
.metro-main .metro-fotoserien-list a{color:inherit;text-decoration:none;}
.metro-main .metro-fotoserien-list a:hover,.metro-main .metro-fotoserien-list a:focus-visible{color:#204678;text-decoration:underline;}

/* 2.1: WordPress Blockgalerie und klassische Galerie mit korrekter Spaltenzahl. */
.metro-main .wp-block-gallery,
.metro-main .wp-block-gallery.has-nested-images,
.metro-main .gallery {gap:12px;max-width:100%;}
.metro-main .wp-block-gallery.has-nested-images {display:grid!important;grid-template-columns:repeat(var(--metro-gallery-columns, 2),minmax(0,1fr))!important;align-items:start;}
.metro-main .wp-block-gallery.has-nested-images figure.wp-block-image,
.metro-main .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
.metro-main .wp-block-gallery.has-nested-images .blocks-gallery-item {width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important;display:block!important;}
.metro-main .wp-block-gallery.has-nested-images figure.wp-block-image img {width:100%;height:auto;display:block;object-fit:cover;}
.metro-main .wp-block-gallery.columns-1 {--metro-gallery-columns:1;}
.metro-main .wp-block-gallery.columns-2 {--metro-gallery-columns:2;}
.metro-main .wp-block-gallery.columns-3 {--metro-gallery-columns:3;}
.metro-main .wp-block-gallery.columns-4 {--metro-gallery-columns:4;}
.metro-main .wp-block-gallery.columns-5 {--metro-gallery-columns:5;}
.metro-main .wp-block-gallery.columns-6 {--metro-gallery-columns:6;}
.metro-main .wp-block-gallery.columns-7 {--metro-gallery-columns:7;}
.metro-main .wp-block-gallery.columns-8 {--metro-gallery-columns:8;}
.metro-main .wp-block-gallery.columns-9 {--metro-gallery-columns:9;}
.metro-main .gallery {display:grid!important;grid-template-columns:repeat(var(--metro-gallery-columns,2),minmax(0,1fr));}
.metro-main .gallery.gallery-columns-1 {--metro-gallery-columns:1;}
.metro-main .gallery.gallery-columns-2 {--metro-gallery-columns:2;}
.metro-main .gallery.gallery-columns-3 {--metro-gallery-columns:3;}
.metro-main .gallery.gallery-columns-4 {--metro-gallery-columns:4;}
.metro-main .gallery.gallery-columns-5 {--metro-gallery-columns:5;}
.metro-main .gallery.gallery-columns-6 {--metro-gallery-columns:6;}
.metro-main .gallery.gallery-columns-7 {--metro-gallery-columns:7;}
.metro-main .gallery.gallery-columns-8 {--metro-gallery-columns:8;}
.metro-main .gallery.gallery-columns-9 {--metro-gallery-columns:9;}
.metro-main .gallery .gallery-item {float:none!important;width:100%!important;margin:0!important;max-width:100%;min-width:0;box-sizing:border-box;}
.metro-main .gallery .gallery-item img {max-width:100%;height:auto;}
.metro-lightbox {flex-direction:column;gap:12px;}
.metro-lightbox img {max-height:calc(90vh - 50px);}
.metro-lightbox-caption {font:16px/1.4 Arial,sans-serif;text-align:center;color:#fff;max-width:90vw;text-shadow:0 1px 3px #000;}
@media(max-width:600px){.metro-main .wp-block-gallery.has-nested-images,.metro-main .gallery {grid-template-columns:repeat(min(2,var(--metro-gallery-columns,2)),minmax(0,1fr))!important;}}

/* Version 2.2: Galerie-Popup maximal 80 % des Viewports, mit weißem Bildrahmen. */
.metro-lightbox { padding: 0; cursor: zoom-out; }
.metro-lightbox img {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: calc(80vh - 50px);
  border: 8px solid #fff;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 15px 50px rgba(0,0,0,.55);
  cursor: default;
}
.metro-lightbox-caption { max-width: 80vw; }
.metro-lightbox button { right: 12px; top: 8px; z-index: 1; padding: 4px 12px; line-height: 1; }
@media(max-width: 600px){
 .metro-lightbox img { max-width: 80vw; max-height: calc(80vh - 65px); border-width: 5px; }
}

/* 2.3 – Kompakte Galerien und bedienbare Lightbox-Navigation */
.metro-main .wp-block-gallery,
.metro-main .wp-block-gallery.has-nested-images,
.metro-main .gallery {gap:6px!important;column-gap:6px!important;row-gap:6px!important;}
.metro-main .wp-block-gallery figure.wp-block-image,
.metro-main .gallery .gallery-item {margin:0!important;}
.metro-lightbox {padding:16px;}
.metro-lightbox-stage {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:80vw;max-height:80vh;gap:9px;cursor:default;}
.metro-lightbox-frame {position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:80vw;max-height:calc(80vh - 48px);}
.metro-lightbox .metro-lightbox-frame img {
  display:block;max-width:80vw;max-height:calc(80vh - 48px);
  border:8px solid #fff;border-radius:2px;box-shadow:0 15px 50px rgba(0,0,0,.55);
  object-fit:contain;width:auto;height:auto;background:#fff;
}
.metro-lightbox .metro-lightbox-close {
  position:absolute;top:8px;right:8px;left:auto;
  width:34px;height:34px;padding:0;border:0;border-radius:3px;
  background:rgba(20,31,46,.72);color:#fff;font-size:27px;line-height:34px;
  text-align:center;cursor:pointer;z-index:3;
}
.metro-lightbox .metro-lightbox-close:hover {background:#15263b;}
.metro-lightbox .metro-lightbox-prev,.metro-lightbox .metro-lightbox-next {
  position:absolute;top:calc(50% - 19px);right:auto;left:-20px;
  transform:translateY(-50%);height:48px;width:40px;
  border:1px solid rgba(255,255,255,.32);border-radius:5px;
  background:rgba(20,31,46,.78);color:#fff;font:30px/1 Arial,sans-serif;
  cursor:pointer;z-index:2;padding:0;
}
.metro-lightbox .metro-lightbox-next {left:auto;right:-20px;}
.metro-lightbox .metro-lightbox-prev:hover,.metro-lightbox .metro-lightbox-next:hover {background:#254a72;}
.metro-lightbox button[hidden] {display:none!important;}
.metro-lightbox .metro-lightbox-caption {max-width:80vw;color:#fff;text-align:center;}
@media(max-width:600px){
 .metro-lightbox .metro-lightbox-frame img {border-width:5px;}
 .metro-lightbox .metro-lightbox-prev {left:0;}
 .metro-lightbox .metro-lightbox-next {right:0;}
 .metro-lightbox .metro-lightbox-close {top:5px;right:5px;}
}

/* 2.5: Masonry (ohne Leerraum bei verschiedenen Bildformaten).
   Funktioniert mit klassischen Galerien und Gutenberg-Galerien. */
.metro-main .gallery.metro-masonry,
.metro-main .wp-block-gallery.metro-masonry,
.metro-main .wp-block-gallery.has-nested-images.metro-masonry {
  display:block!important;
  columns:var(--metro-gallery-columns,2)!important;
  column-gap:6px!important;
  width:100%;
  max-width:100%;
}
.metro-main .gallery.metro-masonry > .gallery-item,
.metro-main .wp-block-gallery.metro-masonry > figure.wp-block-image,
.metro-main .wp-block-gallery.metro-masonry > .blocks-gallery-item,
.metro-main .wp-block-gallery.metro-masonry > .blocks-gallery-grid > .blocks-gallery-item {
  display:block!important;
  float:none!important;
  position:relative;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  margin:0 0 6px!important;
  padding:0!important;
  box-sizing:border-box;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}
.metro-main .gallery.metro-masonry .gallery-icon,
.metro-main .wp-block-gallery.metro-masonry figure.wp-block-image,
.metro-main .wp-block-gallery.metro-masonry .blocks-gallery-item figure {width:100%!important;max-width:100%!important;margin:0!important;}
.metro-main .gallery.metro-masonry .gallery-icon img,
.metro-main .wp-block-gallery.metro-masonry img,
.metro-main .wp-block-gallery.has-nested-images.metro-masonry figure.wp-block-image img {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
}
.metro-main .gallery.metro-masonry br,
.metro-main .gallery.metro-masonry .clear {display:none!important;}
/* Alte Gutenberg-Versionen verwenden ein zusätzliches .blocks-gallery-grid. */
.metro-main .wp-block-gallery.metro-masonry > .blocks-gallery-grid {
  display:contents!important;
}
@media(max-width:650px){
 .metro-main .gallery.metro-masonry,
 .metro-main .wp-block-gallery.metro-masonry {columns:2!important;}
}
@media(max-width:400px){
 .metro-main .gallery.metro-masonry,
 .metro-main .wp-block-gallery.metro-masonry {columns:1!important;}
}

/* Version 2.6: formatfuellende, gleich grosse Galerie-Kacheln in zwei Spalten.
   Der Zoom/Beschnitt betrifft ausschliesslich die Vorschauen, nie die Lightbox. */
.metro-main .gallery.metro-masonry,
.metro-main .wp-block-gallery.metro-masonry,
.metro-main .wp-block-gallery.has-nested-images.metro-masonry {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  columns:unset!important;
  column-gap:6px!important;
  row-gap:6px!important;
  align-items:stretch!important;
}
.metro-main .gallery.metro-masonry > .gallery-item,
.metro-main .wp-block-gallery.metro-masonry > figure.wp-block-image,
.metro-main .wp-block-gallery.metro-masonry > .blocks-gallery-item,
.metro-main .wp-block-gallery.metro-masonry > .blocks-gallery-grid > .blocks-gallery-item {
  width:100%!important;
  margin:0!important;
  padding:0!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  display:block!important;
}
.metro-main .gallery.metro-masonry .gallery-icon,
.metro-main .gallery.metro-masonry .gallery-icon a,
.metro-main .wp-block-gallery.metro-masonry figure.wp-block-image > a,
.metro-main .wp-block-gallery.metro-masonry .blocks-gallery-item figure,
.metro-main .wp-block-gallery.metro-masonry .blocks-gallery-item a {
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  margin:0!important;
}
.metro-main .gallery.metro-masonry .gallery-icon img,
.metro-main .wp-block-gallery.metro-masonry img,
.metro-main .wp-block-gallery.has-nested-images.metro-masonry figure.wp-block-image img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:4 / 3!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.035);
  transition:transform .2s ease;
}
.metro-main .gallery.metro-masonry .gallery-item:hover img,
.metro-main .wp-block-gallery.metro-masonry figure.wp-block-image:hover img,
.metro-main .wp-block-gallery.metro-masonry .blocks-gallery-item:hover img {transform:scale(1.09);}
.metro-main .wp-block-gallery.metro-masonry .blocks-gallery-grid {display:contents!important;}
/* Galerie-Captions werden bei dem einheitlichen Kachelformat nicht ueber Bilder gelegt. */
.metro-main .gallery.metro-masonry .gallery-caption,
.metro-main .wp-block-gallery.metro-masonry figcaption {display:none!important;}
@media(max-width:400px){
 .metro-main .gallery.metro-masonry,
 .metro-main .wp-block-gallery.metro-masonry,
 .metro-main .wp-block-gallery.has-nested-images.metro-masonry {grid-template-columns:1fr!important;columns:unset!important;}
}

/* V2.7: Mobile Navigation only uses the left "Inhalt" menu. Desktop unchanged. */
.metro-mobile-content-menu{display:none;}
@media (max-width:800px){
  .metro-nav-wrap{position:relative;z-index:100;}
  .metro-nav-inner{display:flex!important;justify-content:flex-end!important;align-items:center!important;min-height:52px!important;padding:6px 12px!important;}
  .metro-menu-holder{display:none!important;} /* Never show desktop Hauptmenue on phones */
  .metro-mobile-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:43px;height:40px;padding:7px!important;margin-left:auto;background:#182f55;border:1px solid #7791b5;border-radius:5px;color:#fff;cursor:pointer;}
  .metro-mobile-toggle:hover,.metro-mobile-toggle[aria-expanded="true"]{background:#304f7b;}
  .metro-hamburger-icon{display:flex;flex-direction:column;justify-content:center;gap:5px;width:23px;}
  .metro-hamburger-icon span{display:block;height:2px;width:100%;background:#fff;border-radius:3px;}
  .metro-mobile-content-menu:not([hidden]){display:block!important;width:100%;background:#17294d;border-top:1px solid #60799f;box-shadow:0 8px 17px #0004;}
  .metro-mobile-content-menu[hidden]{display:none!important;}
  .metro-mobile-content-menu ul{list-style:none;padding:8px 12px 12px;margin:0;}
  .metro-mobile-content-menu li{list-style:none;margin:0;padding:0;border-bottom:1px solid #ffffff21;}
  .metro-mobile-content-menu li:last-child{border-bottom:0;}
  .metro-mobile-content-menu a{display:block;padding:11px 13px;color:#edf1f9;text-decoration:none;font-size:15px;letter-spacing:.4px;}
  .metro-mobile-content-menu a:hover,.metro-mobile-content-menu .current-menu-item>a,.metro-mobile-content-menu .current_page_item>a{background:#29436e;color:#fff;}
  .metro-mobile-content-menu .sub-menu,.metro-mobile-content-menu .children{padding:0 0 4px 15px;margin:0;}
  .metro-mobile-content-menu .sub-menu a,.metro-mobile-content-menu .children a{font-size:14px;padding:9px 11px;}
  /* Desktop left sidebar is represented by the hamburger menu on mobile. */
  .metro-content-wrap .metro-sidebar{display:none!important;}
  .metro-content-wrap,.metro-content-wrap.no-sidebar{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"content"!important;}
  .metro-content-wrap .metro-main{grid-area:content!important;grid-column:1!important;grid-row:1!important;min-width:0;}
  /* Footer menu centred at the very bottom. */
  .metro-bottom{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:18px 12px!important;}
  .metro-footer-navigation{width:100%;margin:0!important;}
  .metro-footer-menu{display:flex!important;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0 auto;list-style:none;}
  .metro-footer-menu li{margin:0;padding:0;}
  .metro-footer-menu a{text-align:center;}
}

/* V2.9 – Blaue Header-Leiste bleibt sichtbar, aber ohne Hauptmenü. */
@media(min-width:801px){
 .metro-nav-wrap{display:block!important;}
 .metro-nav-inner{height:58px;min-height:58px;}
}
@media(max-width:800px){
 .metro-nav-wrap{display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;z-index:1000;background:linear-gradient(180deg,#233f73 0%,#1a3159 100%)!important;border:1px solid #12274c!important;border-radius:0 0 10px 10px!important;box-shadow:0 3px 5px #0005!important;}
 .metro-nav-inner{display:flex!important;align-items:center!important;justify-content:flex-end!important;padding:6px 12px!important;min-height:55px!important;height:auto!important;}
 .metro-mobile-toggle{display:inline-flex!important;margin:0!important;float:none!important;}
 .metro-mobile-content-menu:not([hidden]){position:absolute;right:10px;top:calc(100% + 1px);width:min(310px,calc(100vw - 20px));max-height:calc(100vh - 72px);overflow-y:auto;border:1px solid #496187;border-radius:5px;box-shadow:0 8px 20px #0005;}
 .metro-header{padding-right:20px!important;}
}

/* V3.0 – Footer-Menü: senkrechter Trennstrich zwischen den Einträgen. */
.metro-footer-menu{column-gap:0!important;}
.metro-footer-menu > li + li::before{content:"|";display:inline-block;color:#eaf1f6;opacity:.8;margin:0 11px;line-height:1;}
.metro-footer-menu > li{display:flex;align-items:center;}
@media(max-width:650px){.metro-footer-menu{column-gap:0!important;row-gap:8px;justify-content:center;}}

/* Version 3.2: gesamte Footer-Schrift reinweiß */
.metro-bottom, .metro-bottom a, .metro-footer-navigation, .metro-footer-menu a, .metro-footer-menu > li + li::before { color: #FFFFFF !important; }

/* 3.3: Einzelbilder per Block-Zusatzklasse als Lightbox oeffnen. */
.metro-main .chor-popup, .metro-main .chor-popup img {cursor:zoom-in;}

/* 3.4: Einzelbild-Popup mit dezentem Zoom-Symbol */
.metro-main .chor-popup, .metro-main .chor-popup img { cursor:pointer; }
.metro-main figure.chor-popup {position:relative;}
.metro-main figure.chor-popup::after {
 content:""; position:absolute; right:10px; bottom:10px; width:25px; height:25px;
 border-radius:50%; background-color:rgba(18,37,60,.52);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='5.8'/%3E%3Cpath d='m15.3 15.3 4.2 4.2'/%3E%3C/svg%3E");
 background-repeat:no-repeat; background-position:center; background-size:17px 17px;
 opacity:.7; pointer-events:none; transition:opacity .15s ease;
}
.metro-main figure.chor-popup:hover::after {opacity:1;}

/* St.Johannes Musikplayer */
.stj-audio{--stj-blue:#203d70;display:flex;align-items:center;gap:13px;margin:16px 0;padding:12px 15px;background:linear-gradient(145deg,#18345d,#2d527f);color:#fff;border:1px solid #385b87;border-radius:10px;box-shadow:0 5px 18px #14254335;font:14px/1.4 Arial,sans-serif;max-width:100%}
.stj-audio-play{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;color:#1e3e6c;background:#fff;border:0;border-radius:50%;font-size:20px;cursor:pointer;box-shadow:0 1px 7px #0002}.stj-audio-play:hover{background:#e8f1ff}
.stj-audio-details{min-width:0;flex:1}.stj-audio-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}.stj-audio-controls{display:flex;gap:10px;align-items:center}.stj-audio-time{font-size:11px;opacity:.83;min-width:33px;font-variant-numeric:tabular-nums}.stj-audio-progress{width:100%;min-width:30px;accent-color:#fff;cursor:pointer;height:5px;margin:0}.stj-audio-volume{width:65px;accent-color:#fff}.stj-audio-background{position:fixed;right:16px;bottom:16px;z-index:100;background:#1c3862;padding:9px 12px;margin:0;border-radius:999px;box-shadow:0 5px 20px #0005;max-width:calc(100vw - 32px)}.stj-audio-background .stj-audio-play{width:32px;height:32px;flex-basis:32px;font-size:15px}.stj-audio-background .stj-audio-title{margin:0;max-width:180px;font-size:12px}.stj-audio-background .stj-audio-controls{display:none}.stj-midi-notice{padding:12px;border-left:3px solid #203d70;background:#eff3f8;margin:12px 0}
@media(max-width:520px){.stj-audio{gap:8px;padding:10px}.stj-audio-volume{display:none}.stj-audio-background{bottom:12px;right:12px}}

/* Music administration: show the same polished frontend player in preview */
.appearance_page_stj-music .stj-audio{max-width:680px}

/* 3.9: kompakter MP3-Player mit echter Wellenform und optionalem Download */
.stj-audio-player{gap:10px;padding:8px 12px;border-radius:8px;min-height:66px;margin:12px 0}
.stj-audio-player .stj-audio-play{flex:0 0 36px;width:36px;height:36px;font-size:16px}
.stj-audio-player .stj-audio-details{min-width:0}
.stj-audio-head{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:1px;line-height:1.2;margin-bottom:3px}
.stj-audio-head .stj-audio-title{font-size:13px;font-weight:700;margin:0;white-space:normal}
.stj-audio-artist{font-size:11px;color:#d4e6fb;opacity:.9}
.stj-audio-controls{gap:7px}
.stj-audio-wave{height:30px;width:100%;min-width:45px;display:block;cursor:pointer;touch-action:manipulation;outline-offset:3px}
.stj-audio-time{font-size:10px;min-width:28px}
.stj-audio-player .stj-audio-volume{width:48px;min-width:36px;accent-color:#77d9ff}
.stj-audio-download{flex:0 0 26px;width:26px;height:30px;color:#e9f4ff;display:grid;place-items:center;border-radius:5px;text-decoration:none}
.stj-audio-download:hover,.stj-audio-download:focus{background:#ffffff22;color:#79dbff}
.stj-audio-background .stj-audio-wave{display:none}
.stj-audio-background .stj-audio-head{margin:0}
@media(max-width:520px){.stj-audio-player{gap:7px;padding:8px}.stj-audio-player .stj-audio-volume{display:none}.stj-audio-head .stj-audio-title{font-size:12px}.stj-audio-artist{font-size:10px}}

/* St.Johannes 4.0 – einfache Titelzeile ohne Hervorhebung */
.stj-audio-head .stj-audio-title,.stj-audio-background .stj-audio-title{font-weight:400!important;}

/* St.Johannes 4.2 – separate album navigation */
.metro-album-nav{margin-top:18px;padding-top:0;border-top:0}
.metro-album-nav h2{margin-bottom:9px}
.metro-mobile-album-nav{border-top:0;padding-top:8px}
.metro-mobile-album-nav h2{font:normal 17px Arial,sans-serif;margin:7px 24px 4px;color:#cbd7ea}
@media(min-width:801px){.metro-mobile-album-nav{display:none}}
.stj-album-filter-card{background:#fff;border:1px solid #d0d5dc;padding:16px 20px;margin:18px 0;max-width:1000px;box-shadow:0 1px 2px #0001}
.stj-album-filter-card .stj-album-filter-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stj-album-filter-card select{min-width:240px;max-width:100%}
.stj-album-filter-card input[type=search]{min-width:240px;max-width:100%}

/* St.Johannes: ausschließlich manuell eingefügte „Aktuelles“-Beiträge. */
.stj-aktuelles{margin:26px 0 14px;max-width:100%}
.stj-aktuelles-heading{font-size:24px;margin:0 0 15px;padding-bottom:7px;border-bottom:1px solid #b5c6d7;color:#52728b;font-weight:400}
.stj-aktuelles-item{padding:15px 0 17px;border-bottom:1px solid #dce4ec}
.stj-aktuelles-item:last-child{border-bottom:0}
.stj-aktuelles-title{font-size:19px!important;margin:0 0 3px!important;line-height:1.35}
.stj-aktuelles-title a{color:#4b6c8b;text-decoration:none}
.stj-aktuelles-title a:hover{text-decoration:underline}
.stj-aktuelles-date{font-size:12px;color:#748597;display:block;margin-bottom:7px}
.stj-aktuelles-excerpt{margin:0 0 8px!important;font-size:14px;line-height:1.65}
.stj-aktuelles-more{color:#40678b;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.stj-aktuelles-empty{font-size:14px;color:#64778b}


/* Version 4.8 – Aktuelles as full posts, with ordinary paragraph typography. */
.stj-aktuelles .stj-aktuelles-excerpt,
.stj-aktuelles .stj-aktuelles-body,
.stj-aktuelles .stj-aktuelles-body p {
 font-family:inherit;
 font-weight:400;
 white-space:normal;
 overflow-wrap:break-word;
}
.stj-aktuelles .stj-aktuelles-body p {margin:0 0 1em;line-height:1.65}
.stj-aktuelles-full-item .stj-aktuelles-title {margin-bottom:12px!important}
.stj-aktuelles-full-item {padding:18px 0 22px}
.stj-aktuelles-full-item .stj-aktuelles-body img {max-width:100%;height:auto}


/* 4.9: make both Aktuelles shortcodes use the normal post typography. */
.metro-main .stj-aktuelles,
.metro-main .stj-aktuelles p,
.metro-main .stj-aktuelles .stj-aktuelles-body,
.metro-main .stj-aktuelles .stj-aktuelles-excerpt,
.metro-main .stj-aktuelles .stj-normalized-pre,
.metro-main .stj-aktuelles pre,
.metro-main .stj-aktuelles code {
 font-family:var(--metro-font, Arial, Helvetica, sans-serif)!important;
 font-size:inherit;
 font-weight:400;
 font-style:normal;
 letter-spacing:normal;
 text-align:inherit;
 white-space:normal;
 word-spacing:normal;
 overflow-wrap:break-word;
}
.metro-main .stj-aktuelles pre {margin:0 0 1em;padding:0;background:transparent;border:0;}
.metro-main .stj-aktuelles p {font-size:15px;line-height:1.65;margin:0 0 1em}
.metro-main .stj-aktuelles h1,
.metro-main .stj-aktuelles h2,
.metro-main .stj-aktuelles h3,
.metro-main .stj-aktuelles h4,
.metro-main .stj-aktuelles h5,
.metro-main .stj-aktuelles h6 {
 font-family:Georgia,'Times New Roman',serif!important;
 font-weight:400;
 letter-spacing:normal;
 text-transform:none;
}
.metro-main .stj-aktuelles h1 {font-size:30px}
.metro-main .stj-aktuelles h2 {font-size:24px}
.metro-main .stj-aktuelles h3 {font-size:19px}
.metro-main .stj-aktuelles h4 {font-size:17px}
.metro-main .stj-aktuelles h5 {font-size:15px}
.metro-main .stj-aktuelles h6 {font-size:14px}
.metro-main .stj-aktuelles .stj-aktuelles-excerpt {font-size:15px}


/* St.Johannes 5.0 – Einheitliche Typografie für normale Inhalte und Shortcodes.
   Überschriften der Aktuelles-Ausgabe übernehmen die normalen h2/h3-Stile,
   statt gesonderter Schreibmaschinen- oder Serifenschriften. */
.metro-main .metro-entry-body,
.metro-main .metro-entry-body p,
.metro-main .metro-entry-body .stj-aktuelles,
.metro-main .metro-entry-body .stj-aktuelles p,
.metro-main .metro-entry-body .stj-aktuelles pre,
.metro-main .metro-entry-body .stj-aktuelles code {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: normal;
  word-spacing: normal;
}
.metro-main .metro-entry-body .stj-aktuelles pre,
.metro-main .metro-entry-body .stj-aktuelles code {
  white-space: normal;
  background: transparent;
  border: 0;
  padding: 0;
}
.metro-main .metro-entry-body h1,
.metro-main .metro-entry-body h2,
.metro-main .metro-entry-body h3,
.metro-main .metro-entry-body h4,
.metro-main .metro-entry-body h5,
.metro-main .metro-entry-body h6,
.metro-main .metro-entry-body .stj-aktuelles h1,
.metro-main .metro-entry-body .stj-aktuelles h2,
.metro-main .metro-entry-body .stj-aktuelles h3,
.metro-main .metro-entry-body .stj-aktuelles h4,
.metro-main .metro-entry-body .stj-aktuelles h5,
.metro-main .metro-entry-body .stj-aktuelles h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  color: #57728f;
}
.metro-main .metro-entry-body .stj-aktuelles .stj-aktuelles-heading {
  font-size: 23px;
  margin: 0 0 20px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid #b5c6d7;
}
.metro-main .metro-entry-body .stj-aktuelles .stj-aktuelles-title {
  font-size: 19px !important;
  margin: 0 0 12px !important;
}
.metro-main .metro-entry-body .stj-aktuelles .stj-aktuelles-excerpt,
.metro-main .metro-entry-body .stj-aktuelles .stj-aktuelles-body p {
  font-size: 15px;
  line-height: 1.28;
}

/* Pressearchiv 5.2 */
.stj-presse-archiv{font-family:inherit;font-size:inherit}
.stj-presse-years{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.stj-presse-years a{padding:6px 11px;background:#eaf0f6;border:1px solid #c7d5e1;border-radius:4px;text-decoration:none;color:#294b72}
.stj-presse-years a:hover{background:#dce8f3}
.stj-presse-year{margin:0 0 30px}
.stj-presse-year h2{padding:0 0 9px!important;margin:0 0 11px!important;border-bottom:1px solid #bed0e0}
.stj-presse-list{list-style:none;margin:0;padding:0}
.stj-presse-list li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 6px;border-bottom:1px solid #e5ebf1}
.stj-presse-list li:nth-child(even){background:#f6f8fa}
.stj-presse-list li a{text-decoration:none}
.stj-presse-list li a:hover{text-decoration:underline}
.stj-presse-pdf-symbol{font-size:10px;letter-spacing:.5px;border:1px solid #9fb3c8;border-radius:3px;color:#4f7295;padding:2px 4px}
.stj-presse-pdf-link{margin:25px 0!important}
.stj-presse-pdf-link a{display:inline-flex;align-items:center;gap:10px;border:1px solid #c8d5e1;border-radius:5px;padding:9px 13px;text-decoration:none;background:#f3f7fa;color:#2c5376}
.stj-presse-pdf-link a:hover{background:#e6f0f8}
.stj-presse-file-icon{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:#a23938;color:white;border-radius:2px;width:30px;height:34px}


/* St.Johannes 5.5 – Joomla-Header: gesamte weiße Fläche seitlich eingerückt. */
@media (min-width: 801px) {
  .metro-shell > .metro-header {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 0 16px !important;
    padding: 0 22px !important;
    background: #fff;
    min-height: 139px;
  }
  .metro-header .metro-rule {display: block; width:100%;}
  .metro-header .metro-rule > .metro-branding {
    position: static !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 1041px !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .metro-header .metro-branding img {
    display:block;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: left center;
  }
}
@media (max-width:800px) {
  .metro-shell > .metro-header {margin:0 !important;width:100%;padding:0 15px !important;}
  .metro-header .metro-rule > .metro-branding {position:static !important;left:auto !important;width:100% !important;}
}


/* St.Johannes 5.6 – abgerundeter Übergang vom weißen Logo-Header
   zum blauen Sliderbereich, analog zum ursprünglichen Joomla-Layout. */
@media (min-width: 801px) {
  .metro-shell > .metro-feature {
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #203d70 !important;
    position: relative;
    isolation: isolate;
    box-shadow: none !important;
  }
  .metro-shell > .metro-feature > .metro-feature-inner {
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden;
    background: #203d70 !important;
    margin: 0 !important;
    border: 0 !important;
  }
}


/* St.Johannes 5.7 – keine Schattenkante am äußeren Seitencontainer.
   Die Schatten auf dem blauen Header und den Inhaltskarten bleiben erhalten. */
@media (min-width: 801px) {
  .metro-shell { box-shadow: none !important; }
  .metro-shell > .metro-header { box-shadow: none !important; border: 0 !important; }
}

/* Version 5.8 – Klassische, eingerückte Sitemap, passend zur Joomla-Vorlage. */
.metro-main .stj-sitemap {font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55;color:#30343a}
.metro-main .stj-sitemap h2 {font-family:inherit;font-weight:400;color:#587797;font-size:23px;border-bottom:1px solid #bccbdd;padding:0 0 8px;margin:0 0 12px}
.metro-main .stj-sitemap h2:not(:first-child){margin-top:25px}
.metro-main .stj-sitemap .stj-sitemap-list {list-style:disc;margin:0 0 0 18px;padding:0}
.metro-main .stj-sitemap .stj-sitemap-list .stj-sitemap-list {margin:4px 0 7px 22px}
.metro-main .stj-sitemap li {display:list-item;padding:2px 0;margin:0}
.metro-main .stj-sitemap a {color:#2d577f;text-decoration:none}
.metro-main .stj-sitemap a:hover {text-decoration:underline}

/* St.Johannes 6.0 – Kontaktformular */
.stj-contact{max-width:780px;margin:20px 0 30px;font-family:Arial,Helvetica,sans-serif;color:#35455b}
.stj-contact-form{display:grid;gap:17px}
.stj-contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.stj-contact label{display:block;font-size:14px;color:#405b79;font-weight:normal}
.stj-contact input:not([type="hidden"]),.stj-contact textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;background:#fff;border:1px solid #b9c8d7;border-radius:6px;color:#26384f;box-shadow:inset 0 1px 3px #00000009;transition:border-color .16s,box-shadow .16s}
.stj-contact input:focus,.stj-contact textarea:focus{outline:none;border-color:#5b93c2;box-shadow:0 0 0 3px #76bce52b}
.stj-contact textarea{resize:vertical;min-height:130px}
.stj-contact-bottom{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:3px}
.stj-contact .stj-contact-math{display:block;min-width:190px}
.stj-contact .stj-contact-math strong{font-weight:600;color:#203e66}
.stj-contact .stj-contact-math input{max-width:150px}
.stj-contact .stj-contact-submit{border:1px solid #214a79;background:linear-gradient(180deg,#315581,#1d3b66);color:#fff;border-radius:6px;padding:12px 22px;cursor:pointer;box-shadow:0 3px 9px #152e4c24}
.stj-contact .stj-contact-submit:hover{background:#254a76}
.stj-contact-note{color:#788495;font-size:12px;margin:0!important}
.stj-contact-notice{padding:12px 16px;border-radius:5px;margin:0 0 18px;border:1px solid #b6c9db;background:#f0f6fc}
.stj-contact-error{border-color:#deb0b0;background:#fff1f1;color:#7e3030}
.stj-contact-success{border-color:#afcbbd;background:#f1faf4;color:#275a3d}
.stj-contact-trap{position:absolute!important;left:-9999px!important;height:1px!important;overflow:hidden!important}
@media(max-width:600px){.stj-contact-fields{grid-template-columns:1fr}.stj-contact-bottom{align-items:stretch}.stj-contact .stj-contact-submit{width:100%}}


/* St.Johannes 6.1 – moderne, ruhige Navigation im linken Inhalts-/Albenmenue.
   Keine HTML- oder Menuezuordnungs-Aenderungen erforderlich. */
@media (min-width:801px) {
  .metro-sidebar .metro-content-menu,
  .metro-sidebar .metro-content-pages ul {
    margin: 2px -7px 4px !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .metro-sidebar .metro-content-menu li,
  .metro-sidebar .metro-content-pages li {
    position: relative;
    margin: 2px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
  }
  .metro-sidebar .metro-content-menu li::before,
  .metro-sidebar .metro-content-pages li::before {content: none !important;}
  .metro-sidebar .metro-content-menu a,
  .metro-sidebar .metro-content-pages a {
    position: relative;
    display: block;
    padding: 9px 9px 9px 29px;
    border-radius: 6px;
    color: #c5d3e8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .35px;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
  }
  .metro-sidebar .metro-content-menu a::before,
  .metro-sidebar .metro-content-pages a::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid #90a6c5;
    border-right: 1.5px solid #90a6c5;
    transform: translateY(-50%) rotate(45deg);
    transition: border-color .18s ease;
  }
  .metro-sidebar .metro-content-menu a:hover,
  .metro-sidebar .metro-content-menu a:focus-visible,
  .metro-sidebar .metro-content-pages a:hover,
  .metro-sidebar .metro-content-pages a:focus-visible {
    color: #ffffff;
    background: #ffffff14;
  }
  .metro-sidebar .metro-content-menu a:hover::before,
  .metro-sidebar .metro-content-menu a:focus-visible::before,
  .metro-sidebar .metro-content-pages a:hover::before {border-color: #8cddff;}
  .metro-sidebar .metro-content-menu .current-menu-item > a,
  .metro-sidebar .metro-content-menu .current_page_item > a,
  .metro-sidebar .metro-content-pages .current_page_item > a {
    color: #fff;
    background: #66c9fa22;
    box-shadow: none;
  }
  .metro-sidebar .metro-content-menu .current-menu-item > a::before,
  .metro-sidebar .metro-content-menu .current_page_item > a::before,
  .metro-sidebar .metro-content-pages .current_page_item > a::before {border-color: #8cddff;}
  .metro-sidebar .metro-content-menu .sub-menu,
  .metro-sidebar .metro-content-pages .children {padding: 1px 0 3px 12px !important;margin: 0 !important;}
  .metro-sidebar .metro-content-menu .sub-menu a,
  .metro-sidebar .metro-content-pages .children a {font-size: 12px;}
  .metro-sidebar .metro-content-menu a:focus-visible,
  .metro-sidebar .metro-content-pages a:focus-visible {outline: 2px solid #89d7ff;outline-offset: 1px;}
}
@media (prefers-reduced-motion: reduce) {
 .metro-sidebar .metro-content-menu a,
 .metro-sidebar .metro-content-pages a {transition:none !important;}
}


/* St.Johannes 6.2 – Navigation sichtbar modernisiert.
   Eigene Klasse am echten Sidebar-Element, bewusst ohne min-width-Einschränkung. */
.stj-modern-sidebar ul.metro-content-menu,
.stj-modern-sidebar .metro-content-pages ul {
  list-style:none !important;
  margin: 0 -8px !important;
  padding: 0 !important;
}
.stj-modern-sidebar ul.metro-content-menu > li,
.stj-modern-sidebar .metro-content-pages li {
  list-style:none !important;
  margin: 3px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.stj-modern-sidebar ul.metro-content-menu li::before,
.stj-modern-sidebar .metro-content-pages li::before {content: none !important; display:none !important;}
.stj-modern-sidebar ul.metro-content-menu li > a,
.stj-modern-sidebar .metro-content-pages li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 36px;
  padding: 8px 9px !important;
  gap: 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  color: #dbe7f6 !important;
  font: 400 13px/1.35 Arial,Helvetica,sans-serif !important;
  letter-spacing: .22px !important;
  text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease !important;
}
.stj-modern-sidebar ul.metro-content-menu li > a::before,
.stj-modern-sidebar .metro-content-pages li > a::before {
  content:'' !important;
  position:static !important;
  display:block !important;
  flex:0 0 6px;
  width:6px;
  height:6px;
  padding:0;
  border:solid #98bfde;
  border-width:0 1.5px 1.5px 0;
  border-radius:0;
  background:transparent;
  transform:rotate(-45deg);
  transition:border-color .18s ease;
}
.stj-modern-sidebar ul.metro-content-menu li > a:hover,
.stj-modern-sidebar ul.metro-content-menu li > a:focus-visible,
.stj-modern-sidebar .metro-content-pages li > a:hover,
.stj-modern-sidebar .metro-content-pages li > a:focus-visible {
  background:rgba(122,193,246,.22) !important;
  color:white !important;
}
.stj-modern-sidebar ul.metro-content-menu li.current-menu-item > a,
.stj-modern-sidebar ul.metro-content-menu li.current_page_item > a,
.stj-modern-sidebar ul.metro-content-menu li.current-menu-ancestor > a,
.stj-modern-sidebar .metro-content-pages li.current_page_item > a {
  background:rgba(110,199,255,.19) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.stj-modern-sidebar ul.metro-content-menu li > a:focus-visible {outline:2px solid #8bd8ff;outline-offset:1px}
.stj-modern-sidebar ul.metro-content-menu .sub-menu {padding:3px 0 3px 12px!important;margin:0!important}
.stj-modern-sidebar .metro-album-nav {margin-top:20px}
@media(prefers-reduced-motion:reduce){.stj-modern-sidebar a{transition:none!important}}


/* St.Johannes 6.5 – aktualisierte Headergrafik, sauber mittig ausgerichtet */
.metro-logo-default{display:block;max-width:100%;text-align:center;}
.metro-logo-default img{display:block;margin:0 auto;width:100%;height:auto;max-width:1041px;max-height:none;object-fit:contain;object-position:center center;}
.metro-header .custom-logo-link{text-align:center;}
.metro-header .custom-logo{display:block;margin:0 auto;object-position:center center;}


/* St.Johannes 6.6 – dezenter Weiterlesen-Button im Menü-Stil */
.stj-weiterlesen-button {
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  margin:8px 0;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px;
  background:#1b3155;
  color:#f6f9fd !important;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.35;
  text-decoration:none !important;
  box-shadow:none;
  transition:background-color .18s ease, color .18s ease;
}
.stj-weiterlesen-button:hover,
.stj-weiterlesen-button:focus-visible {
  background:#2d5380;
  color:#fff !important;
  text-decoration:none !important;
}
.stj-weiterlesen-button:focus-visible { outline:2px solid #83cefb; outline-offset:2px; }
.stj-weiterlesen-arrow { color:#8bd8ff; font-size:17px; line-height:0.65; font-weight:400; }
@media(prefers-reduced-motion:reduce){.stj-weiterlesen-button{transition:none}}


/* Classic Editor Row: verhindert, dass der folgende Bereich neben Floats läuft. */
.stj-row-clear {display:block!important;clear:both!important;width:100%!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;float:none!important;}

/* St.Johannes 6.9 – Versionsnummer direkt hinter Footer-Menü in derselben Zeile */
.metro-bottom{align-items:center;}
.metro-footer-navigation{display:inline-flex;align-items:center;}
.metro-footer-navigation + .stj-footer-version{margin-left:10px;}
.stj-footer-version{display:inline-block;color:#fff;white-space:nowrap;font-size:12px;font-weight:400;line-height:1.4;}
@media(min-width:651px){.metro-bottom{flex-wrap:nowrap!important;}.metro-footer-menu{flex-wrap:nowrap!important;}.metro-footer-navigation{margin-left:auto;}}
@media(max-width:650px){.metro-bottom{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:8px!important;}.metro-footer-navigation{margin-top:0!important;}.metro-footer-navigation + .stj-footer-version{margin-left:4px;}}


/* St.Johannes 7.1 – YouTube Player */
.stj-youtube{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;background:#172b4c;border:6px solid #203d70;border-radius:10px;overflow:hidden;box-shadow:0 5px 16px rgba(9,25,48,.22);margin:18px 0 24px;}
.stj-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stj-youtube-consent{width:100%;height:100%;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:linear-gradient(145deg,#234573,#14294a);color:white;cursor:pointer;text-align:center;padding:16px}
.stj-youtube-play{width:62px;height:44px;border-radius:12px;background:#e6f4ff;color:#19395e;display:grid;place-items:center;box-shadow:0 5px 16px #0004;transition:transform .15s ease}
.stj-youtube-consent:hover .stj-youtube-play,.stj-youtube-consent:focus-visible .stj-youtube-play{transform:scale(1.07)}
.stj-youtube-play svg{display:block;width:24px;height:24px;fill:currentColor}
.stj-youtube-label{font-size:15px;font-weight:400;line-height:1.4}
.stj-youtube-privacy{font-size:12px;opacity:.8;line-height:1.4}
@media(max-width:600px){.stj-youtube{border-width:4px;border-radius:7px}.stj-youtube-play{width:48px;height:35px}.stj-youtube-privacy{font-size:10px}}


/* St.Johannes 7.2: Videos-Kartenarchiv */
.stj-videos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 25px;clear:both;font-family:Arial,Helvetica,sans-serif}
.stj-video-card{margin:0!important;padding:0!important;min-width:0;overflow:hidden;border-radius:7px;background:#fff;border:1px solid #d5dde5;box-shadow:0 3px 12px rgba(17,38,66,.1);transition:box-shadow .18s ease,transform .18s ease}
.stj-video-card:hover{box-shadow:0 7px 18px rgba(17,38,66,.19);transform:translateY(-2px)}
.stj-video-link{display:block;color:#2b425e!important;text-decoration:none!important;height:100%;overflow:hidden}
.stj-video-link:focus-visible{outline:3px solid #79cfff;outline-offset:-3px}
.stj-video-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(140deg,#264c78,#132747)}
.stj-video-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;float:none!important;max-height:none!important;margin:0!important}
.stj-video-media-fallback{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;color:rgba(183,218,241,.44)}
.stj-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:33px;border-radius:9px;display:grid;place-items:center;background:rgba(22,44,75,.88);color:#effaff;box-shadow:0 2px 9px #001a;transition:background .2s ease,transform .2s ease}
.stj-video-play svg{display:block;width:21px;height:21px}
.stj-video-card:hover .stj-video-play{background:#437fa9;transform:translate(-50%,-50%) scale(1.08)}
.stj-video-copy{display:flex;flex-direction:column;gap:7px;padding:13px 14px 15px}
.stj-video-title{display:block;color:#496b8d!important;font-size:17px!important;line-height:1.35!important;font-weight:400!important;font-family:Arial,Helvetica,sans-serif!important}
.stj-video-description{font-size:13px!important;line-height:1.5!important;color:#52606b!important;overflow-wrap:anywhere}
.stj-video-open{font-size:12px;color:#426f9a;font-weight:400;margin-top:4px}
.stj-video-open span{color:#60a5d1;margin-left:4px}
@media(max-width:600px){.stj-videos-grid{grid-template-columns:1fr;gap:13px}}
@media(prefers-reduced-motion:reduce){.stj-video-card,.stj-video-play{transition:none}}