html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
    text-align: left;
    vertical-align: baseline;
}
a img, :link img, :visited img {border: 0}
table {border-collapse: collapse; border-spacing: 0}
ul {list-style: none}
q:before, q:after,
blockquote:before, blockquote:after {content: ""}


@font-face {  
  font-family: "Myriad Pro Regular";
  src: url(fonts/MyriadPro-Regular.otf) format("opentype");
}

@font-face {  
  font-family: "Myriad Pro Bold";
  src: url(fonts/MyriadPro-Bold.otf) format("opentype");
}

@font-face {  
  font-family: "Myriad Pro Italic";
  src: url(fonts/MyriadPro-It.otf) format("opentype");
}

:root {
    --blue-rest: #f5f9fd;
    --blue-header: #deedf7;
    --blue-comparison: #e8f2f8;
    --blue-text: #465a74;
    --blue-text-soft: #8fa0b5;
}


body           {font-size:18px; font-family:"Myriad Pro Regular",Helvetica,sans-serif; color:var(--blue-text); background-color: #fbfdff }
h1             {font-size:30px; margin-top:40px}
h1 a           {color: #7e513c}
p              {margin:15px 0; line-height:1.5em; text-align:justify}
a              {color:#5f7ea4; text-decoration:none}
a:hover        {padding-bottom: 1px; color:var(--blue-text-soft); border-bottom:1px solid var(--blue-text-soft)}
a.nounderline:hover {color:var(--blue-text-soft); border-bottom:none}
a.underline    {padding-bottom: 1px; border-bottom:1px solid #5f7ea4}
a.underline:hover {padding-bottom: 1px; border-bottom:1px solid var(--blue-text-soft)}
ul             {margin:15px 0; margin-left:25px; list-style-type:disc}
li             {margin:10px 0; text-align:justify}

#cover         {float:right; margin:20px 0 5px 30px}
#wrapper       {width:1000px; margin:0 auto; padding-top: 0; margin-bottom: 0}
#header        {background-color: var(--blue-header); padding: 28px 30px 16px 0px; box-shadow: 0 0 0 100vmax var(--blue-header); clip-path: inset(0 -100vmax); position: relative}
#content       {background-color: var(--blue-rest); padding: 0 30px 30px 30px; margin-top: 0; margin-bottom: 0; box-shadow: 0 0 0 100vmax var(--blue-rest); clip-path: inset(0 -100vmax); position: relative}
#title         {color:#224064; font-size:45px; text-align:center}
#title a       {color:#4f6f96}
#journal       {font-size:20px; text-align:center; font-style:italic; padding-bottom: 0.0em}
#teaser        {margin-top:40px}

#authors       {width:100%; margin-top:30px}
#authors tr    {height:28px}
#authors tr.mail {height:35px}
#authors td    {text-align:center; color:#2a3a4e}
#authors a     {color:#2a3a4e}

#authors #affiliation {font-size:10px; padding-top: 10px}
#authors #affiliation span {margin-left: 20px}
#authors #author {padding-right: 2.5em}

#affiliations {font-size:14px; padding-top: 10px}
#affiliations #affiliation {padding-right: 2em}
.comingsoon {color: rgb(200,200,220)}
.comingsoon:hover {color: rgb(220,220,240)}

#navigation {
    font-size:20px;
    text-align:center;
    text-transform:uppercase;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
}
/* #navigation td {padding:10px 15px 10px 15px;} */
#navigation td {padding:0px 0px 0px 0px;}

#teasercaption {
    font-size: 12px
}

#bibtexsec {
    font-family:"Courier",monospace; 
    white-space:pre; 
    font-size:12px;
    background-color: #edf3f9;
    padding: 15px;
    overflow:scroll; 
    margin:15px 0
}


.super         {vertical-align:super; font-size:70%}
.bold          {font-family:"Myriad Pro Bold",Helvetica,sans-serif; font-weight:bold}
.italic,#journal {font-family:"Myriad Pro Italic",Helvetica,sans-serif; font-style:italic}

.videoframe{
    text-align: center;
    margin-top: 1em;
    margin-right: 0%;
    margin-left: 0%;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

/* Image Comparison Slider Styles */
.comparison-band {
    margin: 0px 0;
    padding: 18px 0;
    background-color: var(--blue-comparison);
    box-shadow: 0 0 0 100vmax var(--blue-comparison);
    clip-path: inset(0 -100vmax);
}

.comparison-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 0;
    background-color: rgba(252, 254, 255, 0.96);
    padding: 25px;
    /* border: 1px solid rgba(202, 214, 226, 0.95); */
    border-radius: 8px;
    box-shadow:
        0 10px 28px rgba(120, 136, 154, 0.18),
        0 2px 10px rgba(120, 136, 154, 0.10);
}

.comparison-slider-container {
    flex: 0 0 500px;
    width: 500px;
}

.comparison-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.comparison-image {
    display: block;
    width: 100%;
    height: auto;
}

.comparison-image-1 {
    position: relative;
    z-index: 1;
}

.comparison-image-2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(0 100% 0 0);
}

.slider-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 3;
    pointer-events: none;
}

.comparison-text {
    flex: 1;
    padding-top: 0;
}

.comparison-text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4em;
}

.comparison-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.comparison-buttons .action-button {
    display: inline-block;
    min-width: 100px;
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(180deg, #f6f9fc 0%, #e9eff6 100%);
    color: var(--blue-text);
    font-size: 14px;
    font-family: "Myriad Pro Bold",Helvetica,sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 1px 3px rgba(91, 111, 135, 0.12);
    border-bottom: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.comparison-buttons .action-button:hover {
    filter: brightness(1.00);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    color: #5a5a5a;
    border-bottom: none;
    padding-bottom: 10px;
}

.video-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0px;
}

.video-container iframe {
    max-width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.image-container {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.image-container a {
    border-bottom: none;
}

.logo-strip {
    gap: 20px;
    align-items: center;
}

.logo-strip .logo-image {
    width: 200px;
    max-width: 200px;
    height: auto;
    flex: 0 0 200px;
}

.responsive-image {
    max-width: 100%;
    width: 800px;
    height: auto;
    display: block;
}