/* Keep the page width unchanged when an open dialog hides the scrollbar. */
html { scrollbar-gutter: stable; }
.artist .urban-video-link { margin: 28px 0 0; text-align: center; }
.urban-video-link a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 44px; color: #19385e; text-decoration: none; gap: 6px; }
.urban-video-modal { box-sizing: border-box; width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid #d8e0eb; border-radius: 16px; background: #fff; color: #19385e; font: 16px/1.6 system-ui, sans-serif; box-shadow: 0 20px 80px #0004; }
.urban-video-modal::backdrop { background: #0b1b32b8; }
.urban-video-modal h2 { margin: 0 48px 24px 0; font: 700 clamp(1.2rem, 4vw, 1.85rem)/1.3 system-ui, sans-serif; }
.urban-video-modal .urban-video-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: 1px solid #d8e0eb; border-radius: 50%; cursor: pointer; font: 28px/1 system-ui, sans-serif; }
.urban-video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; max-height: 65dvh; background: #000; }
.urban-video-modal a { color: #19385e; text-decoration: underline; }
.urban-video-link a:focus-visible, .urban-video-modal :focus-visible { outline: 3px solid #c58c16; outline-offset: 4px; }
@media (max-width: 540px) { .urban-video-modal { padding: 20px 16px; } }

.urban-video-link a:hover, .urban-video-link a:focus-visible { text-decoration: none; }
.urban-video-icon { flex: 0 0 auto; width: 30px; height: 30px; vertical-align: middle; }
.urban-video-modal[open] { animation: urban-video-fade-in 650ms ease-out both; }
.urban-video-modal[open]::backdrop { animation: urban-video-fade-in 650ms ease-out both; }
@keyframes urban-video-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .urban-video-modal[open], .urban-video-modal[open]::backdrop { animation: none; }
}

.urban-video-modal .urban-video-credits { text-align: right; margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: #526174; }


/* SKTC: Scrollleisten innerhalb der runden Modal-Ecken. */
:is(dialog,[role="dialog"]:not(.modal),.modal-content){border-radius:16px;clip-path:inset(0 round 16px)}
:is(dialog,[role="dialog"],.modal-content,.modal-body),:is(dialog,[role="dialog"],.modal-content) *{scrollbar-width:thin;scrollbar-color:rgba(90,105,125,.65) transparent}
:is(dialog,[role="dialog"],.modal-content,.modal-body)::-webkit-scrollbar,:is(dialog,[role="dialog"],.modal-content) *::-webkit-scrollbar{width:8px;height:8px}
:is(dialog,[role="dialog"],.modal-content,.modal-body)::-webkit-scrollbar-track,:is(dialog,[role="dialog"],.modal-content) *::-webkit-scrollbar-track{background:transparent;margin-block:14px;border-radius:999px}
:is(dialog,[role="dialog"],.modal-content,.modal-body)::-webkit-scrollbar-thumb,:is(dialog,[role="dialog"],.modal-content) *::-webkit-scrollbar-thumb{background:rgba(90,105,125,.65);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
:is(dialog,[role="dialog"],.modal-content,.modal-body)::-webkit-scrollbar-button,:is(dialog,[role="dialog"],.modal-content) *::-webkit-scrollbar-button{display:none;width:0;height:0}

@supports selector(::-webkit-scrollbar){:is(dialog,[role="dialog"],.modal-content,.modal-body),:is(dialog,[role="dialog"],.modal-content) *{scrollbar-width:auto;scrollbar-color:auto}}

/* SKTC: Links ohne Unterstreichung in allen Zuständen. */
a:any-link,a:any-link:hover,a:any-link:focus,a:any-link:focus-visible,a:any-link:active,a:any-link *{text-decoration:none!important}

/* SKTC: Flache Formularfelder ohne native 3D-Raender. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]),textarea,select){
 appearance:none;-webkit-appearance:none;box-shadow:none!important;background-image:none;border:1px solid #8b96a3!important;border-radius:8px;background-color:rgba(255,255,255,.8);color:inherit;font:inherit;box-sizing:border-box;
}
:where(input,textarea,select):focus-visible{outline:2px solid #224579;outline-offset:2px;box-shadow:none!important}
select{padding-right:2rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2330343b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right .65rem center!important;background-size:16px!important}
select[multiple],select[size]:not([size="1"]){background-image:none!important;padding-right:.65rem!important}
input[type="file"]::file-selector-button{border:1px solid #8b96a3;border-radius:8px;background:#f2f5f9;color:#30343b;box-shadow:none;font:inherit;padding:.5rem .8rem}

/* SKTC: Aktionsbuttons in Modal-Fenstern linksbuendig. */
:is(dialog,[role="dialog"],.modal-content) :is(button,input[type="submit"],input[type="button"],input[type="reset"],a.button,a.btn):not(.modal-close):not(.story-close):not(.close):not(.btn-close):not([aria-label][data-close]:empty){margin-left:0!important;margin-right:auto!important;align-self:flex-start!important}
:is(dialog,[role="dialog"],.modal-content) :is(.modal-footer,.dialog-actions,.modal-actions,.form-actions,.actions,.button-row){justify-content:flex-start!important;text-align:left!important}
:is(dialog,[role="dialog"],.modal-content) :is(form,.button-group,.buttons){text-align:left}