/*
 * Grundfarben:
 * Logo-Pibk: #EC1C24;
 * Grau: #BFE2ED
 * 
 * Palette URL: http://paletton.com/#uid=43p150k6tUZ00++5XZ494PImbG-
 */

/* As hex codes */
/*
.color-primary-0 { color: #BFE2ED }
.color-primary-1 { color: #FFFFFF }
.color-primary-2 { color: #CDEEF9 }
.color-primary-3 { color: #A1CEDD }
.color-primary-4 { color: #41A2C2 }

.color-secondary-1-0 { color: #FFFBCC }
.color-secondary-1-1 { color: #FFFFFF }
.color-secondary-1-2 { color: #FFFBD0 }
.color-secondary-1-3 { color: #FFF9B7 }
.color-secondary-1-4 { color: #FFF04E }

.color-secondary-2-0 { color: #F5C3E1 }
.color-secondary-2-1 { color: #FFFFFF }
.color-secondary-2-2 { color: #FCCDE9 }
.color-secondary-2-3 { color: #ECA9D2 }
.color-secondary-2-4 { color: #DC44A0 }

.color-complement-0 { color: #FFE6CC }
.color-complement-1 { color: #FFFFFF }
.color-complement-2 { color: #FFE8D0 }
.color-complement-3 { color: #FFDCB7 }
.color-complement-4 { color: #FFA94E }
*/
/* As RGBa codes */
/*
.rgba-primary-0 { color: rgba(191,226,237,1) } 
.rgba-primary-1 { color: rgba(255,255,255,1) }
.rgba-primary-2 { color: rgba(205,238,249,1) }
.rgba-primary-3 { color: rgba(161,206,221,1) }
.rgba-primary-4 { color: rgba( 65,162,194,1) }

.rgba-secondary-1-0 { color: rgba(255,251,204,1) }
.rgba-secondary-1-1 { color: rgba(255,255,255,1) }
.rgba-secondary-1-2 { color: rgba(255,251,208,1) }
.rgba-secondary-1-3 { color: rgba(255,249,183,1) }
.rgba-secondary-1-4 { color: rgba(255,240, 78,1) }

.rgba-secondary-2-0 { color: rgba(245,195,225,1) }
.rgba-secondary-2-1 { color: rgba(255,255,255,1) }
.rgba-secondary-2-2 { color: rgba(252,205,233,1) }
.rgba-secondary-2-3 { color: rgba(236,169,210,1) }
.rgba-secondary-2-4 { color: rgba(220, 68,160,1) }

.rgba-complement-0 { color: rgba(255,230,204,1) } 
.rgba-complement-1 { color: rgba(255,255,255,1) }
.rgba-complement-2 { color: rgba(255,232,208,1) }
.rgba-complement-3 { color: rgba(255,220,183,1) }
.rgba-complement-4 { color: rgba(255,169, 78,1) }
*/

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.3em 0;
}

header.kicker h5 {
  color: #352735;
  text-transform: uppercase;
  font-size: 0.8em;
}

header.major {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: -ms-fit-content;
  width: fit-content;
  margin-bottom: 2em;
}

header.major > :first-child::after {
  background-color: #E9E10D;
}

.spotlights header.major > :first-child::after {
  background-color: #FFFFFF;
}
.spotlights > section > .content > .inner p {
    color: #3D3D3D;
}

.spotlights > section:nth-child(7n - 6) {
    background-color: #A1CEDD;
}

.spotlights > section:nth-child(7n - 5) {
    background-color: #FFF04E;
    .button {
        color: #95B3BD;
        box-shadow: inset 0 0 0 2px #95B3BD;
    }
    .button:hover {
        box-shadow: inset 0 0 0 2px #EC1C24;
    }
}

.spotlights > section:nth-child(7n - 4) {
    background-color: #DC44A0;
    header.major h3 {
        color: #ffffff;
    }
}

.spotlights > section:nth-child(7n - 3) {
    background-color: #41A2C2;
}

.spotlights > section:nth-child(7n - 2) {
    background-color: #A1CEDD;
    filter: opacity(85%) saturate(10%) brightness(200%);
}

.spotlights > section:nth-child(7n - 1) {
    background-color: #FFFBCC;
    filter: opacity(85%) saturate(10%) brightness(200%);
}

.spotlights > section {
    background-color: #FFA94E;
}

/*.spotlights > section > .image img {
    filter: opacity(85%) saturate(60%) brightness(200%);
    background-color: #FFA94E;
}*/

/* Das <picture>-Element muss dieselbe Breite wie das Bild bekommen, und die
   width/height-Attribute (gegen Layout-Shift) duerfen die Hoehe nicht fixieren. */
.spotlights > section > .image picture {
    display: block;
    width: 50%;
}

.spotlights > section > .image picture img {
    width: 100%;
    height: auto;
}

/* Spotlights zur Mitte hin ausrichten (per Frontmatter: spotlights_center: true).
   Ungerade Reihen: Bild links -> Bild an den rechten Rand seiner Spalte.
   Gerade Reihen:   Text links -> Text rechtsbündig.
   Die jeweils rechte Spalte bleibt linksbündig und zeigt damit ohnehin zur Mitte. */
@media screen and (min-width: 981px) {

    .spotlights-center > section:nth-child(2n - 1) > .image > img,
    .spotlights-center > section:nth-child(2n - 1) > .image > picture {
        margin-left: auto;
    }

    .spotlights-center > section:nth-child(2n) > .content > .inner {
        text-align: right;
    }

    .spotlights-center > section:nth-child(2n) > .content > .inner header.major {
        margin-left: auto;
    }

    /* Der Unterstrich der Überschrift ragt sonst rechts über den Text hinaus */
    .spotlights-center > section:nth-child(2n) > .content > .inner header.major > :first-child {
        margin-left: -0.5em;
    }

}

/*
BRUSTKREBS            Rot: 0 100 100 1 -   EC1C24 -- #fbcdce
ANGEHÖRIGE BRUSTKREBS Lila: 60 100 14 1 -  80297F -- #e3cfe2
BORDERLINE            Petrol: 100 40 1 1 - 007BC0 -- #c6e2f1
YOGA                  Gelb: 10 1 100 1 -   E9E10D -- #faf8c9 -> neu E9930D -> A4680B
footer                blau                 00537F -- #c6d9e3
*/

.tiles article:nth-child(8n - 7):before {
    background-color: #DC44A0;
}

.tiles article:nth-child(8n - 6):before {
    background-color: #41A2C2;
}

.tiles article:nth-child(8n - 5):before {
    background-color: #FFA94E;
}

.tiles article:nth-child(8n - 4):before {
    background-color: #FFF04E;
}

.tiles article:nth-child(8n - 3):before {
    background-color: #DC44A0;
}

.tiles article:nth-child(8n - 2):before {
    background-color: #41A2C2;
}

.tiles article:nth-child(8n - 1):before {
    background-color: #FFFBCC;
}

.tiles article:nth-child(8n):before {
    background-color: #A1CEDD;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 18px;
  }
}

.tiles article:nth-child(1),
.tiles article:nth-child(2) {
    width: 50%;
}

.tiles article a,
.tiles article p {
    -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
    color: inherit;
    text-decoration: none;
}

#banner.style1:after {
    background-color: #efefef;
}

#banner.style2:after {
    background-color: #efefef;
}

#banner.style3:after {
    background-color: #efefef;
}

#banner.style4:after {
    background-color: #efefef;
}

#banner.style5:after {
    background-color: #efefef;
}

#banner.style6:after {
    background-color: #efefef;
}

a.icon.alt:hover::before {
  background-color: #EC1C24;
}

body, input, select, textarea {
    font-family: 'Source Sans Pro','Source Sans Pro', Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
}

body, #main { 
    background-color: #ffffff;
}

body #two {
    color: #444;
}

.intro-header.big-img {
    height: 600px;
}

.header-section.has-img .no-img {
    padding: 20px 0 13px 0;
    margin: 0;
    box-shadow: none;
    border-bottom: 1px solid #EC1C24;
}

.header-section.has-img .no-img .page-heading h1 {
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {
  #banner {
    padding: 5em 0 2em 0;
  }
}

#banner.style2 > .inner:first-child {
  margin-top: 2em;
}
@media only screen and (min-width: 767px) {
    #banner > .inner:first-child,
    #banner.style2 > .inner:first-child {
      margin-top: 6em;
    }
}
#banner > .inner header {
  margin-top: 0;
}

#banner > .inner header.major h1 {
    line-height: 120%;
}


header.major > p {
    color: #FFF;
}

#banner > .inner .content p {
    color: #223;
}

header.major > p,
#banner > .inner .content p {
    font-size: 0.8em;
    font-weight: 400; 
}

#banner > .inner .content p.normal {
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: none;
}

#banner > .inner .nobotmarg,
#banner > .inner .nobotmarg p,
#banner > .inner .nobotmarg ul,
#banner > .inner .nobotmarg div {
    margin-bottom: 0;
}

#banner {
    height: inherit;
}

#banner.style2 {
    height: inherit;
    min-height: 27em;
    max-height: inherit;
}

#banner.style2 .inner .content p,
#banner.style2 .inner .content div {
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: none;
    color: #223;
}

#banner::after {
    opacity: 0.97;
}

#banner.major {
    height: fit-content;
    /*height: 73vh;
    min-height: 46em;*/
    max-height: 70em;
}

#announce > .inner header {
    width: auto;
}

@media only screen and (max-width: 768px) {
    #banner ul.actions li {
        padding: 0 2vh;
        line-height: 0em;
    }
    #banner a.button {
        height: auto;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        white-space: inherit;
        line-height: 2em;
    }
}

@media only screen and (max-width: 480px) {
    body.home section#two {
        margin-top: 40em;
    }
}

p.spacer {
    margin: 0 0 0.5em 0 !important;
}

#main .inner.single {
    padding: 8em 0 4em 0 !important;

    header.major {
        width: auto;
    }
}

@media only screen and (max-width: 767px) {
  #banner > .inner header {
    margin-top: 0;
  }
  #main .inner.single {
    padding: 4em 0 4em 0 !important;
  }
  .tiles article h3 a,
  .tiles article p {
    text-shadow: 0px 0px 1px #000,0px 0px 5px #fff,0px 0px 2px #fff;
  }
}

#main .inner.single .meta {
    margin-top: 3em;
}

#main > * > .inner {
    
}

hr {
    border: 0;
    border-bottom: 2px solid rgba(236, 28, 36, 0.25);
    margin: 2.3em 0 2em 0;
}

hr.major {
  margin: 3.5em 0 3em 0;
}

hr.minor {
    border-bottom: 2px solid rgba(236, 28, 36, 0.15);
    width: 60%;
    margin: 2em auto;
    padding: 0;
    clear: both;
    float: none;
}

hr.small {
    border-color: #EC1C24;
    border-width: 2px;
}

#contact {
    background-color: #dfd8df;
    clear: both;
}

#contact a,
#contact span {
    color: #494961;
}

a:hover,
a:focus {
    color: #EC1C24 !important;
}


.tiles h1,
.tiles h2,
.tiles h3,
.tiles h4,
.tiles h5,
.tiles h6 {
    text-shadow: 0px 0px 1px #683b5a,0px 0px 2px #fff,0px 0px 3px #fff;
}

@media only screen and (max-width: 767px) {
    .tiles h1,
    .tiles h2,
    .tiles h3,
    .tiles h4,
    .tiles h5,
    .tiles h6 {
        color: #AA191E;
        font-weight: bold;
    }
}

.tiles article:hover h1,
.tiles article:hover h2,
.tiles article:hover h3,
.tiles article:hover h4,
.tiles article:hover h5,
.tiles article:hover h6 {
    text-shadow: 0px 0px 3px #683b5a,0px 0px 5px #fff,0px 0px 6px #fff;
}

.tiles article:hover h3 {
    color: #AA191E;
}

.tiles article {
    max-height: 30em;
    min-height: 20em;
}

body.home section#two {
    max-height: 30em;
    min-height: 14em;
}

body.home section#one {
    max-height: 120em;
    min-height: 30em;
    background-color: #41A2C229;
}

body.home section#announce {
    max-height: 80em;
    min-height: 20em;
    background-color: #41A2C229;
}

.tiles article:hover h3 a {
    /*text-shadow: 0 0 1px #000,0 0 2px #000,0 0 3px #000,-1px -1px 2px #683b5a,1px 1px 2px #683b5a;*/
    /*text-shadow: -1px -1px 1px #000, 1px 1px 1px #000,0 0 3px #000,0 0 2px #000,0 0 4px #683b5a;*/
    /*color: #fff;*/
    /*text-shadow: 0 0 2px #000,0 0 3px #000,-1px -1px 2px #000,1px 1px 2px #000;*/
}

.tiles article p {
    color: #445;
}

.tiles article:hover::before {
    opacity: 1;
}

.tiles article:hover p {
    /*color: #fff;*/
    /*text-shadow: 0 0 2px #000,0 0 3px #000,-1px -1px 2px #000,1px 1px 2px #000;*/
}

.navbar-custom {
    border-bottom: 1px solid #EC1C24;
}

.navbar-custom
.avatar-container
.avatar-img-border {
	box-shadow: none;
    -webkit-box-shadow: none
    -moz-box-shadow: none;
    /*border-top: 1px solid #EC1C24;*/
}

body, input, select, textarea, strong, b {
    color: #445;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'LeanOSansFY-Light', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #EC1C24;
}

.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
    text-shadow: 1px 1px 2px #000;
}

.well {
	background: none;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.well h1,
.well h2,
.well h3,
.well h4,
.well h5,
.well h6,
.well p {
	text-align: center;
}

.dgsf-zertifikat img {
  width: 130px;
  height: auto;
  border: 2px solid #b8b853;
  background-color: #fff;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

footer {
    border-top: 1px #EC1C24 solid;
    background-color: #00537f;
}

.footer ul li, 
#footer .copyright li {
    color: #ffffff !important;
    margin-left: 0;
    padding-left: 0;
}

ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
    display: flex; /* Flexbox aktivieren */
    justify-content: space-between; /* Platz zwischen den Gruppen */
    gap: 10px;
    width: 100%;
}

ul.icons li {
    display: inline-block;
    padding: 0 1em 0 0;
}

ul.icons li:last-child {
    padding-right: 0;
    text-align: right;
}

@media screen and (max-width: 736px) {
    ul.icons li {
        padding: 0 0.75em 0 0;
    }
}

ul.copyright {
    margin: 0;
}

footer .contact-to {
    text-align: center;
    margin: 10px 0 0;
}

div.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

div.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

ul {
    list-style: circle;
}

input,
textarea {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #EC1C24;
    width: 100%;
    font-weight: 400;
    font-size: 1.2em;
    padding: 4px;
    margin-bottom: 1em;
}

input[type="submit"].grey,
input[type="reset"].grey,
input[type="button"].grey,
button.grey,
.button.grey {
    box-shadow: inset 0 0 0 2px #445;
    color: #445;
}

input[type="submit"].lightgrey,
input[type="reset"].lightgrey,
input[type="button"].lightgrey,
button.lightgrey,
.button.lightgrey {
    box-shadow: inset 0 0 0 2px #3D3D3D;
    color: #3D3D3D;
}

input[type="submit"].grey:hover, input[type="submit"].grey:active,
input[type="reset"].grey:hover,
input[type="reset"].grey:active,
input[type="button"].grey:hover,
input[type="button"].grey:active,
button.grey:hover,
button.grey:active,
.button.grey:hover,
.button.grey:active {
    box-shadow: inset 0 0 0 2px #EC1C24;
    color: #EC1C24;
}

input[type="submit"].lightgrey:hover, input[type="submit"].lightgrey:active,
input[type="reset"].lightgrey:hover,
input[type="reset"].lightgrey:active,
input[type="button"].lightgrey:hover,
input[type="button"].lightgrey:active,
button.lightgrey:hover,
button.lightgrey:active,
.button.lightgrey:hover,
.button.lightgrey:active {
    box-shadow: inset 0 0 0 2px #FFFFFF;
    color: #FFFFFF !important;
}

input[type="submit"].next.grey:before,
input[type="reset"].next.grey:before,
input[type="button"].next.grey:before,
button.next:before,
.button.next:before,
input[type="submit"].next.lightgrey:before,
input[type="reset"].next.lightgrey:before,
input[type="button"].next.lightgrey:before,
button.lightgrey:before,
.button.lightgrey:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23444455%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E");
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    border: 2px solid #EC1C24;
    box-shadow: none;
    color: #EC1C24;
    font-style: normal;
    font-weight: bold;
}

input:focus[type="submit"] {
    color: #EC1C24;
}

input:focus,
textarea:focus {
    border: 1px dotted #EC1C24;
}

label {
    font-weight: 400;
    margin-top: 10px;
    color: #EC1C24;
}

label.error {
    font-family: 'LeanOSansFY-Light', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200;
    color: #EC1C24;
    font-size: 0,8em;
}
label.success {
    color: #445;
    font-size: 1em;
}

#gdpr.checkbox-input {
    width: 20px;
}

/*
 * responisiv
 */
span.image {
    display: none;
}

span.image.mobvisible {
    display: block;
    float: none;
    width: 60%;
}

/* Bilder mit Zoom-Effekt ({{< img ... zoom="..." >}}, Unterseiten Systemische
   Therapie und Psychoonkologische Beratung) bleiben auch mobil sichtbar und
   nehmen dort 45 % der Bildschirmbreite ein (Umfluss durch .image.right). */
@media only screen and (max-width: 1023px) {
    span.image:has(.zoomimg) {
        display: inline-block;
        width: 45%;
    }
}

.navbar-custom .avatar-container {
    left: 36px;
    margin-top: -57px;
    z-index: -1;
}

.navbar-custom.top-nav-short .avatar-container{
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.navbar-custom.top-nav-short .navbar-brand {
    padding: 19px 13px 0 62px !important;
}

.navbar-brand {
    padding: 19px 13px 0 62px;
}

@media only screen and (max-width: 768px) {
    .navbar-custom .avatar-container {
        margin-top: -38px;
    }
    .navbar-brand {
        padding: 19px 13px 0 78px;
    }
    .navbar-custom.top-nav-short .navbar-brand {
        padding: 19px 13px 0 78px !important;
    }
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 17px;
  }
}

@media only screen and (min-width: 1024px) {
    span.image {
        display: block;
    }
    span.image.left.mobvisible {
        float: left;
        width: inherit;
    }

    .navbar-brand {
        padding: 15px 15px;
    }
    .navbar-custom .avatar-container {
        left: 50%;
        margin-top: -75px;
    }

    .navbar-custom.top-nav-short .avatar-container {
        opacity: 1;
        left: 60px;
        margin-top: -30px;
        width: 100px;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }

    .navbar-custom.top-nav-short .navbar-brand {
        padding: 19px 13px 0 62px;
    }
}

@media only screen and (max-width: 736px) {
    #main > * > .inner {
        padding: 3em 0 4em 0;
    }
}

/*
 * Zoom-Effekt fuer Bilder ({{< img ... zoom="true" >}})
 *
 * Der Anzeigebereich bleibt exakt so gross wie das Bild ohnehin ist
 * (Breite des Elternelements, Hoehe proportional) – skaliert wird nur der
 * Inhalt, der Ueberstand wird abgeschnitten.
 *
 * Startpunkt: --zoom-x / --zoom-y sind der Punkt des Bildes, der zu Beginn
 * in der Mitte des Anzeigebereichs sitzt – hier in PROZENT der Bildbreite
 * bzw. -hoehe. Das Shortcode rechnet die Pixelangabe aus dem Frontmatter
 * (zoom.origin: "x,y", bezogen auf das 400px breite Bild) in diese Prozente
 * um. Direkt im CSS kann man sie ueberschreiben, z. B.:
 *
 *   .zoomimg { --zoom-x: 13%; --zoom-y: 29%; }
 *
 * Weitere Stellschrauben: --zoom-scale (Startvergroesserung, 5 = 500 %),
 * --zoom-blur (Startunschaerfe), --zoom-time (Dauer), --zoom-delay.
 */
.zoomimg {
    display: block;
    overflow: hidden;
    position: relative;
    --zoom-x: 50%;
    --zoom-y: 50%;
    --zoom-scale: 5;
    --zoom-blur: 4px;
    --zoom-time: 30s;
    --zoom-delay: 0s;
}

.zoomimg .zoomimg-scale {
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-animation: zoomimg-scale var(--zoom-time) var(--zoom-delay) linear both;
    animation: zoomimg-scale var(--zoom-time) var(--zoom-delay) linear both;
}

/* Die Verschiebung sitzt INNERHALB der Skalierung – dadurch bleibt der
   gewaehlte Punkt waehrend des Zooms in der Mitte, bis er zum Schluss
   sanft in die normale Bildlage zurueckwandert. */
.zoomimg .zoomimg-pan {
    display: block;
    width: 100%;
    -webkit-animation: zoomimg-pan var(--zoom-time) var(--zoom-delay) linear both;
    animation: zoomimg-pan var(--zoom-time) var(--zoom-delay) linear both;
}

/* Die Zwischenschritte sind geometrisch gestuft (bei 500 %: 3,34x / 2,24x /
   1,50x), damit der Zoom gleichmaessig statt anfangs hektisch wirkt. */
@-webkit-keyframes zoomimg-scale {
    0%   { -webkit-transform: scale(var(--zoom-scale)); transform: scale(var(--zoom-scale)); -webkit-filter: blur(var(--zoom-blur)); filter: blur(var(--zoom-blur)); }
    25%  { -webkit-transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.586)); transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.586)); -webkit-filter: blur(calc(var(--zoom-blur) * 0.586)); filter: blur(calc(var(--zoom-blur) * 0.586)); }
    50%  { -webkit-transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.309)); transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.309)); -webkit-filter: blur(calc(var(--zoom-blur) * 0.309)); filter: blur(calc(var(--zoom-blur) * 0.309)); }
    75%  { -webkit-transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.124)); transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.124)); -webkit-filter: blur(calc(var(--zoom-blur) * 0.124)); filter: blur(calc(var(--zoom-blur) * 0.124)); }
    100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0); filter: blur(0); }
}

@keyframes zoomimg-scale {
    0%   { transform: scale(var(--zoom-scale)); filter: blur(var(--zoom-blur)); }
    25%  { transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.586)); filter: blur(calc(var(--zoom-blur) * 0.586)); }
    50%  { transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.309)); filter: blur(calc(var(--zoom-blur) * 0.309)); }
    75%  { transform: scale(calc(1 + (var(--zoom-scale) - 1) * 0.124)); filter: blur(calc(var(--zoom-blur) * 0.124)); }
    100% { transform: scale(1); filter: blur(0); }
}

@-webkit-keyframes zoomimg-pan {
    0%   { -webkit-transform: translate(calc(50% - var(--zoom-x)), calc(50% - var(--zoom-y))); transform: translate(calc(50% - var(--zoom-x)), calc(50% - var(--zoom-y))); }
    25%  { -webkit-transform: translate(calc((50% - var(--zoom-x)) * 0.586), calc((50% - var(--zoom-y)) * 0.586)); transform: translate(calc((50% - var(--zoom-x)) * 0.586), calc((50% - var(--zoom-y)) * 0.586)); }
    50%  { -webkit-transform: translate(calc((50% - var(--zoom-x)) * 0.309), calc((50% - var(--zoom-y)) * 0.309)); transform: translate(calc((50% - var(--zoom-x)) * 0.309), calc((50% - var(--zoom-y)) * 0.309)); }
    75%  { -webkit-transform: translate(calc((50% - var(--zoom-x)) * 0.124), calc((50% - var(--zoom-y)) * 0.124)); transform: translate(calc((50% - var(--zoom-x)) * 0.124), calc((50% - var(--zoom-y)) * 0.124)); }
    100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}

@keyframes zoomimg-pan {
    0%   { transform: translate(calc(50% - var(--zoom-x)), calc(50% - var(--zoom-y))); }
    25%  { transform: translate(calc((50% - var(--zoom-x)) * 0.586), calc((50% - var(--zoom-y)) * 0.586)); }
    50%  { transform: translate(calc((50% - var(--zoom-x)) * 0.309), calc((50% - var(--zoom-y)) * 0.309)); }
    75%  { transform: translate(calc((50% - var(--zoom-x)) * 0.124), calc((50% - var(--zoom-y)) * 0.124)); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .zoomimg .zoomimg-scale,
    .zoomimg .zoomimg-pan {
        -webkit-animation: none;
        animation: none;
    }
}

/* Wurde diese Seite in der laufenden Browser-Sitzung schon einmal geladen,
   setzt das Inline-Script in head_custom.html die Klasse zoom-seen auf <html>
   und das Bild erscheint sofort in seiner normalen Lage. */
html.zoom-seen .zoomimg .zoomimg-scale,
html.zoom-seen .zoomimg .zoomimg-pan {
    -webkit-animation: none;
    animation: none;
}

.underlink {
    text-decoration: underline; 
    text-decoration-color: #EC1C2457;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}
.underlink:hover {
    text-decoration-color: transparent; 
}