@import url("fonts.css");
@import url("font-awesome.css");

/*roboto-300 - latin*/
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

:root {
    --bg-color: #fdf8e9;
    --wp--style--unstable-gallery-gap: 10px;
    --wp--preset--spacing--20: min(1.5rem, 2vw);
    --wp--preset--spacing--30: min(2.5rem, 3vw);
    --wp--preset--spacing--40: min(4rem, 5vw);
    --wp--preset--spacing--50: min(6.5rem, 8vw);
    --wp--preset--spacing--60: min(10.5rem, 13vw);
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--spacing--10: 1rem;
}

body {
    background-color: var(--bg-color);
    color:#444;
}

p {
    font-family: 'Roboto' !important;
}

body.page-id-32 h1.wp-block-post-title {
    display: none !important;
}

:where(.wp-site-blocks *:focus) {
    outline-width: 1px;
    outline-style: dotted;
}

:where(.wp-site-blocks) .wp-block-post-title{
    margin-block-start: var(--wp--preset--spacing--60, 3rem);
    margin-block-end:   var(--wp--preset--spacing--40, 1.5rem);
}

:root :where(.is-layout-constrained) > p {
    margin-block-start: 0;
    margin-block-end: 1.2rem;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

h1,
h2,
h3,
.main-nav,
.opening-times p {
    font-family: 'Titillium Web';
}

.main-nav li a:focus {
    outline: none !important;
    text-decoration: underline;
}

.main-nav li:not(:nth-last-child(-n + 1))::after {
    content: '|';
    margin-left: 25px;
}

.main-nav li a {
    outline: none;
}




.aktuelles-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.aktuelles-box > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: 0 !important;
}

.aktuelles-box > .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-right: 300px;
}

.aktuelles-box > figure.wp-block-image.size-full {
    flex: 0 0 300px;
    max-width: 300px;
    margin: 0;
}

.aktuelles-box > figure.wp-block-image.size-full img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateX(20px) translateY(-35px);
}

@media (max-width: 768px) {
    h1.wp-block-post-title {
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
    }

    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 1600px;
    }

    .aktuelles-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .aktuelles-box > .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained,
    .aktuelles-box > figure.wp-block-image.size-full {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .aktuelles-box > figure.wp-block-image.size-full img {
        transform: translateX(0) translateY(50px);
    }

    .aktuelles-box > .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
        margin-right: 0;
    }
}




/* Grid-Layout für die Aktionen-Galerie */
.aktionen-grid.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 100%;
}

/* WP-Default-Gallery-Styles neutralisieren – OHNE display:... !important */
.aktionen-grid.wp-block-gallery .wp-block-image {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Bilder füllen die Kachel proportional */
.apoam-aktion-thumb {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet: 2 Spalten */
@media (max-width: 900px) {
    .aktionen-grid.wp-block-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Handy: 1 Spalte */
@media (max-width: 600px) {
    .aktionen-grid.wp-block-gallery {
        grid-template-columns: 1fr;
    }
}


/* Load-More-Button */
.apoam-aktionen-load-more-wrap {
    margin-top: 2rem;
    text-align: center;
}

.apoam-aktionen-load-more-button {
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    font: inherit;
}

.apoam-aktionen-load-more-button:hover:not(:disabled) {
    background: #e9e9e9;
}

.apoam-aktionen-load-more-button.is-disabled,
.apoam-aktionen-load-more-button:disabled {
    opacity: 0.5;
    cursor: default;
}








.zum-kosmetik-institut {
    position: relative;
    margin-block-start: 0 !important;
}

.zum-kosmetik-institut a {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    color: #8d2f45;
    background-color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    z-index: 999;
}

.zum-kosmetik-institut a::before {
    font-family: 'FontAwesome';
    content: "\f14c";
    margin-right: 10px;
}


.wp-block-post-featured-image {
    margin-block-start: 0;
}

div.wp-block-separator { border-color: transparent !important; }

.phone-numbers td { vertical-align:middle; }
.phone-numbers td.icon { width:40px; padding:0.462em 0; text-align:center }

.icon-h24 { display:inline-block; height:24px; }
.icon-h24-ambulance { background:url(../images/ambulance.png) no-repeat center center; width:50px }
.icon-h24-emergency-tooth { background:url(../images/emergency-tooth.png) no-repeat center center; width:24px }
.icon-h24-emergency-doctor { background:url(../images/emergency-doctor.png) no-repeat center center; width:19px }
.icon-h24-emergency-phone { background:url(../images/emergency-phone.png) no-repeat center center; width:23px }

.team-member { margin-block: 2rem; }
.team-member img { box-shadow: 0 0 10px rgba(0,0,0,0.15); }
.team-content { column-count: 1 !important; column-gap: normal; }
.team-list h2 { font-size: 22px; font-weight: bold; }
.team-list hr { margin-top:2rem; margin-bottom:2rem; border-color:transparent; }

.team-list .wp-block-columns.are-vertically-aligned-center > .wp-block-column {
    display: flex;
}

.team-list .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child {
    align-items: flex-start;
}

.team-list .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child .team-content {
    margin-block: auto;
    text-align: left;
}

.wp-block-column.has-background {
    position: relative;
    overflow: visible;
}

/*.wp-block-image.blutstropfen {*/
/*    overflow: visible;*/
/*    flex: 0 0 auto;*/
/*}*/

.wp-block-image.blutstropfen img {
    height: 140px;
    margin-left: -25px;
    /*width: auto !important;*/
    /*object-fit: contain !important;*/
    /*display: block;*/
}

/*.blutstropfen-box p {*/
/*    padding: 0 !important;*/
/*    margin-block-start: 0;*/
/*}*/

.wp-block-gallery,
.wp-block-group,
.wp-block-columns {
    overflow: visible;
}

.parent-pageid-46 .entry-content img.size-full {
    width: 100%;
    height: auto;
}

.subpage-pager { background-color:#f5f5f5; margin-top: clamp(1.5rem, 4vw, 3rem); }
.subpage-pager__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
    border-radius: .75rem;
}
.subpage-pager a { text-decoration: none; }
.subpage-pager__prev, .subpage-pager__next {
    font-weight: 600;
}
.subpage-pager__index, .subpage-pager__spacer {
    opacity: .75; font-size: .9em;
}
.subpage-pager .is-disabled { opacity: .4; cursor: default; }

/*@media (min-width: 782px) {*/
/*    .wp-block-column.has-background:has(.wp-block-image.blutstropfen) {*/
/*        display: grid;*/
/*        grid-template-columns: auto 1fr;*/
/*        align-items: center;*/
/*        column-gap: var(--wp--style--block-gap, 1rem);*/
/*    }*/

/*    .wp-block-column.has-background:has(.wp-block-image.blutstropfen) .wp-block-image.blutstropfen { grid-column: 1; }*/

/*    .wp-block-column.has-background:has(.wp-block-image.blutstropfen) > p.has-background {*/
/*        grid-column: 2;*/
/*        background-color: transparent;*/
/*    }*/

/*    .wp-block-column.has-background:has(.wp-block-image.blutstropfen) .wp-block-buttons {*/
/*        grid-column: 1 / -1;*/
/*        justify-content: end;*/
/*    }*/
/*}*/



/*.wp-block-image.tubendruecker,*/
/*.wp-block-image.tubendruecker * { overflow: visible; }*/

/*.wp-block-image.tubendruecker {*/
/*    position: relative;*/
/*    z-index: 1;*/
/*}*/

.wp-block-image.tubendruecker img {
/*    display: block;*/
/*    width: auto;*/
    height: 110px;
    margin-top: -50px;
    margin-left: 15px;
}

/*.tubendruecker-box p {*/
/*    padding: 0 !important;*/
/*    margin-block-start: 0;*/
/*}*/

@media (max-width: 782px) {
    #modal-1-content ul {
        gap: 0;
        padding: 0;
    }

    .opening-times {
        text-align: center;
    }

    /*.tubendruecker-box,*/
    /*.blutstropfen-box {*/
    /*    padding-left: 1.5rem;*/
    /*}*/

    /*.wp-block-image.tubendruecker img {*/
    /*    height: 110px;*/
    /*    margin-top: -20px;*/
    /*}*/

    .team-list .wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child .team-content {
        margin-block: 0;
    }

    .main-nav li:not(:last-child)::after {
        content: '';
        margin-left: 0;
    }

    .wp-block-navigation.items-justified-center {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    footer nav {
        margin: 20px 0 !important;
    }
}

/*@media (min-width: 782px) {*/
/*    .wp-block-column.has-background:has(.wp-block-image.tubendruecker) {*/
/*        display: grid;*/
/*        grid-template-columns: auto 1fr;*/
/*        align-items: center;*/
/*        column-gap: var(--wp--style--block-gap, 1rem);*/
/*    }*/

/*    .wp-block-column.has-background:has(.wp-block-image.tubendruecker) .wp-block-image.tubendruecker { grid-column: 1; }*/

/*    .wp-block-column.has-background:has(.wp-block-image.tubendruecker) > p.has-background {*/
/*        grid-column: 2;*/
/*        background-color: transparent;*/
/*    }*/

/*    .wp-block-column.has-background:has(.wp-block-image.tubendruecker) .wp-block-buttons {*/
/*        grid-column: 1 / -1;*/
/*        justify-content: end;*/
/*    }*/
/*}*/

/* Früher auf mobiles Menü umschalten (z.B. ab <= 960px) */
@media (max-width: 960px) {
    /* Hamburger-Icon EINBLENDEN */
    .wp-block-navigation.main-nav .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
    }

    /* Horizontale Menüleiste AUSBLENDEN, solange Menü nicht geöffnet ist */
    .wp-block-navigation.main-nav
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__container {
        display: none !important;
    }

    figure.blutstropfen img {
        max-width: 210px;
    }

    figure.tubendruecker img {
        max-width: 210px;
    }

    .aktuelles-box figure img {
        max-width: 260px;
    }
}

@media (max-width: 1024px) {
    .main-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .main-nav li:not(:nth-last-child(-n + 2))::after {
        content: '';
        /*margin-left: 10px;*/
    }

    .tubendruecker-box {

    }
}


.aktuelles-header {
    margin-top: 25px !important;
}

.aktuelles-box {
    position: relative !important;
    display: block !important;
}

.aktuelles-box > figure {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: min(40%, 420px);
    width: auto;
    height: auto;
}

.aktuelles-box > p {
    margin: 0 0 .6rem 0;
}

img.custom-logo {
    content: url("/wp-content/uploads/2025/09/Apotheke-am-Alten-Markt-Logo-2025-e1762339148592.webp");
	padding: 10px;
	margin: 25px 0 10px;
    /*width: 100%;*/
}

@media (max-width: 782px) {
    img.custom-logo {
        content: url("/wp-content/themes/apoam2025/Apotheke-am-Alten-Markt-Logo-2025-c.webp");
    }

    .aktuelles-box {
        padding-right: 0;
    }
    .aktuelles-box > figure {
        position: static;
        margin-top: 16px;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    #modal-1-content ul {
        gap: 2rem;
        padding: 10px 0;
    }

    .wp-block-image.blutstropfen {
        height: 110px;
        margin-left: -60px;
    }
}


.wp-block-buttons>.wp-block-button.btn-1 {
    position: absolute !important;
    right: 0;
    bottom: 0;
}


.block-button a {
    background-color: #8d2f45;
    color: #fff;
    padding: .5rem 1rem;
    border-top: 5px solid var(--bg-color);
    border-left: 5px solid var(--bg-color);
    border-radius: 0;
}

body .is-layout-flex {
    justify-content: space-evenly;
    width: 100%;
}

#quick-contacts * {
    animation-duration: .8s !important;
    transition-duration: .8s !important;
}

/* Mobile Quick Phone Button */
#quick-contacts-2 {
    display: none;
}

/* Quick Contact Buttons */
#quick-contacts {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#quick-contacts li {
    position: relative;
    cursor: pointer;
}

#quick-contacts li .button-wrap {
    background-color: #fff;
    height: 60px;
    width: 280px;
    overflow: hidden;
    font-weight: normal;
    font-size: 16px;
    margin: 0;
    position: absolute;
    right: -222px;
    transition: right 1s ease;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}

#quick-contacts li .button-wrap:hover {
    right: 0;
}

#quick-contacts li .button-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    background: #8A2339;
    vertical-align: text-bottom;
    border-radius: 50px;
    margin: 5px 0 5px 5px
}

#quick-contacts li .button-icon i:before {
    color: #fff;
    font-size: 26px;
    font-weight: normal;
    margin-left: 0;
    vertical-align: top;
}

/*#call-button-with-icon a:before,*/
#quick-contacts li#quick-phone-btn .button-icon i:before {
    font-family: 'FontAwesome';
    content: "\f095";
    font-style: normal;
}

/*#mail-button-with-icon a:before,*/
#quick-contacts li#quick-mail-btn .button-icon i:before {
    font-family: 'FontAwesome';
    content: "\f0e0";
    font-style: normal;
}

#quick-contacts li .button-content {
    display: inline-block;
    width: 220px;
    height: 60px;
    line-height: 60px;
    text-align: left;
}

#quick-contacts li .button-content a {
    color: #a69678;
    text-decoration: none;
    vertical-align: text-bottom;
    display: inline-block;
    width: 100%;
}

#quick-contacts li:nth-child(2) {
    top: 70px;
    position: absolute;
}


#social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    margin-top: 3rem;
}

#social-links li {
    display: inline-block;
    margin: 0 5px;
}

#social-links li a {
    font-weight: bold;
    padding: 3px 10px 3px 6px;
    text-shadow: none;
    letter-spacing: 1px;
}

#social-links li i,
#social-links li svg {
    font-size: 46px;
    display: inline-block;
}

#social-links li a.facebook i:before {
    background-color: var(--bg-color);
    color: #8A2339;
}

#social-links li a.instagram i:before {
    background-color: var(--bg-color);
    color: #8A2339;
}

#social-links li a.twitter svg {
    fill: #8A2339;
    color: var(--bg-color);
    width: 54px;
    height: 54px;
    vertical-align: sub;
}

#social-links li a.pinterest i:before {
    background-color: var(--bg-color);
    color: #8A2339;
}

#social-links li a.youtube i {
    background-color: var(--bg-color);
    color: #8A2339;
    font-size: 42px;
}

#back-top {
    display:none;
    text-decoration:none;
    cursor:pointer;
    position:fixed;
    bottom:10px;
    right:10px;
    overflow:hidden;
    width:50px;
    height:50px;
    border:none;
    z-index:999;
    background:url(../images/back-top.png) no-repeat left top;
}

#back-top:hover { background-position:left -50px; }
#back-top a { display:block; height:50px; width:50px; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #back-top{ bottom: calc(16px + env(safe-area-inset-bottom)); }
}

.is-layout-constrained > .alignwide {
    padding-left: 0 !important;
}

.footer-apoam-header { }
footer.footer-block { padding-top: 100px; }
.footer-block a { color: #8a2339 !important; text-decoration: none;  font-size: 16px !important; }
.footer-block a:hover { color: #8a2339 !important; text-decoration: underline; }
.footer-block .std-button a { color: #fff !important; }


.vcard-dl a { background:url(../images/vcard.png) no-repeat left 3px; clear:both; padding-left:22px; }
.imprint a { background:url(../images/imprint.gif) no-repeat left 3px; clear:both; padding-left:22px; }

.services-grid .wp-block-group { align-items: baseline; }
.services-grid .wp-block-group > p:first-child {
    margin-right: auto;
    text-align: left;
}
.services-grid .wp-block-group > p:last-child {
    text-align: right;
    white-space: nowrap;
}

.services-grid .is-layout-flex {
    gap: 2rem 6rem !important;
}

.phone-numbers > div {
    max-width: 600px !important;
}

.phone-numbers a,
.phone-numbers a:visited {
    color: #8A2339;
    font-weight: bold;
    text-decoration: none;
}

body.page-id-34 .entry-content {
    margin-top: 0 !important;
}

.apoam-leistungen p {
    margin-top: 5px !important;
}

.blocks-gallery-grid {
  justify-content: flex-start !important;
}

.wp-block-gallery {
  justify-content: flex-start !important;
  justify-items: start;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    max-width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * .75);
}


/* Notrufnummern */
.phone-numbers .phone-row{
  background: #ebe2cd47;
  margin-bottom: 5px;
  padding: 10px 12px;
  align-items: center;
}

.phone-numbers .phone-row:last-child{
  margin-bottom: 0;
}

.phone-numbers .phone-row .wp-block-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phone-numbers .phone-row .has-text-align-center{
  line-height: 1;
}

#aktionen-alm .alm-listing.aktionen-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
#aktionen-alm .alm-listing.aktionen-grid img{
    width: 100%;
    height: auto;
    display: block;
}



/* 1. Bilder in den Boxen immer flexibel machen */
.blutstropfen-box .wp-block-image img,
.tubendruecker-box .wp-block-image img {
    display: block;
    width: 100% !important;   /* überschreibt das inline width:342px; */
    height: auto !important;
}

/* 2. Spalten-Boxen selbst als Flex-Container,
      damit der Inhalt gleichmäßig verteilt wird und der Button nach unten rutschen kann */
.blutstropfen-box,
.tubendruecker-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Button-Bereich ans Ende der Box schieben */
.blutstropfen-box .wp-block-buttons,
.tubendruecker-box .wp-block-buttons {
    margin-top: auto;
}

/* 3. Responsives Verhalten: untereinander auf Tablets/Phones */
@media (max-width: 1280px) {
    /* Spalten in dieser Sektion auf volle Breite setzen */
    .wp-block-columns .blutstropfen-box,
    .wp-block-columns .tubendruecker-box {
        flex-basis: 100% !important;
        max-width: 100%;
    }
}


@media (max-width: 1024px) {
    .services-grid .is-layout-flex {
        gap: 1rem 2rem !important;
    }

    #blutwerte-testen .wp-block-columns {
        display: block;
        gap: 1rem 2rem !important;
    }

    #blutwerte-testen .wp-block-column {
        margin-bottom: 50px !important;
    }
}